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

.headerLine{
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

Answers


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.

HTML:

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

CSS:

.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

Search




Leave an answer