Responsive div with background image and border image

Question

Hello I have one div with background image and border-bottom image. I want to make it responsive. I have to give fix height to that div so when I make it responsive image get responsive but the distance between border and image increase. This is my code.

.top-info {
  background: url("https://i.stack.imgur.com/prA95.jpg") no-repeat top center;
  height: 40rem;
  background-size: contain;
  border-bottom: 10px solid transparent;
  border-image: url("bg-about-us_border.png") 30 stretch;
  -webkit-border-image: url("https://i.stack.imgur.com/SUUpP.png") 30 stretch;
}

<div class="top-info"></div>

My Problem is that it is working good in full width. But in different mobile resolution the distance between border-bottom and image is increase.

Provide more info. Your problem is not fully described – Andrew Nov 26 '15 at 12:06 — Andrew, Nov 26 '15 at 12:06
I have solved my problem with media query... :) thanks all – David Coder Nov 26 '15 at 13:45 — David Coder, Nov 26 '15 at 13:45

score 1 · Answer 1 · answered Nov 26 '15 at 12:12

1

Replace your class

.top-info {
  background: url("https://i.stack.imgur.com/prA95.jpg") no-repeat left 15px;
  height: 40rem;
  background-size: contain;
  border-top: 10px solid transparent;
  border-image: url("https://i.stack.imgur.com/SUUpP.png") 30 stretch;
  -webkit-border-image: url("https://i.stack.imgur.com/SUUpP.png") 30 stretch;

}

https://jsfiddle.net/8m9dop2c/1/

answered Nov 26 '15 at 12:12

Lalji Tadhani

14,041
3
23
40

thanks sir. but i dont want border top. and border bottom should be come just after the image. no any 1 px distance should be remaining between border bottomand image in different size of browser. – David Coder Nov 26 '15 at 12:15

score 1 · Answer 2 · edited May 23 '17 at 11:52

Solution 1: use an image

A background doesn't change the size of the div containing it. You are fixing the height of the container, and this height is fixed regardless of the dimensions of the background. Why not use a simple image instead?

Here's your CSS:

.top-info {
border-bottom: 10px solid transparent;
border-image: url("bg-about-us_border.png") 30 stretch;
-webkit-border-image: url("https://i.stack.imgur.com/SUUpP.png") 30 stretch;
}

And your html:

<div class="top-info">
<img src="https://i.stack.imgur.com/prA95.jpg" height=100% width=100%> 
</div>

Solution 2: use the padding-top property

Now if you don't want to use an image, you can use the technique described in the second answer to this question and set a padding-top.

How to get div height to auto-adjust to background size?

This will create space for your background, and should be set to the height/width ratio of your image for best effect.

Then your CSS would be:

.top-info {
background: url("https://i.stack.imgur.com/prA95.jpg") no-repeat top center;
width: 100%
height: 0;
padding-top: 60%; /* This should be equal to (img-height / img-width * container-width) */
background-size: contain;
border-bottom: 10px solid transparent;
border-image: url("bg-about-us_border.png") 30 stretch;
-webkit-border-image: url("https://i.stack.imgur.com/SUUpP.png") 30 stretch;
}

And your html:

<div class="top-info"></div>

images are dynamic in all pages and now i can not change so image must be come as background image. :( — David Coder, Nov 26 '15 at 12:53

Responsive div with background image and border image

2 Answers2