Currently, I am attempting to create a page header that includes an image. To achieve this, I am using a div:
<div id = "header">
</div>
To set the background image of the div, I have added the following CSS:
#header{
background-image: url('img/cars.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
top: 0px;
height: 150px;
}
However, the displayed image appears to be cut off. I attempted changing background-size: 100%; to background-size: cover;, but the issue persisted.
I also tried including these lines:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Yet, the result remained unchanged.
When experimenting with background-size: contain, the image shrinks from the right side.
What steps can I take to ensure that the full image is visible in my div?
P.S: While researching, I came across a similar question on css - how to stretch and auto-resize background image. However, the provided solutions did not resolve my specific issue.
EDIT: You can view the effect here.
Thank you for your help!