Home Ask Login Register

Developers Planet

Your answer is one click away!

user2279956 February 2016

Issue with scaling width of background-image (CSS)

I'm havig troubles with an image that, by using "contain" in CSS adds a huge spacing between the top image and the next paragraph. When i use "cover" there is no spacing issue but the pictures width is too high.

I'm using this in CSS

position: relative;
width: 100%;
overflow: hidden;
height: auto;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/bgTop.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: contain;

I upoaded pictures for 100% Desktop, using Cover, using contain and one for the wished results here: Description


Carlton February 2016

Have you considered including the image as an <img> instead of as a background image? This will cause the headerLine div to dynamically change height to match the child image.


<div class="headerLine">
    <img src="sampleimg.jpg" alt="Sample Image" width="600" height="200">


.headerLine img {
    display: block;
    width: 100%;
    height: auto;

Concerning background size from W3 Schools:

Background Cover:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area Background cover will scale the image

Background Contain:

Scale the image to the largest size such that both its width and its height can fit inside the content area

Post Status

Asked in February 2016
Viewed 2,594 times
Voted 4
Answered 1 times


Leave an answer

Quote of the day: live life