CODEWITHSUNDEEP
htmlcssimagewidth
user3105607
user3105607

Reputation: 369

Full width img in styled body tag

Hi i have a header image which I want to be 100% width, however my body tag is already styled with width, is there a way to override it? I tried putting the img div before the body tag in the HTML but that doesnt work, neither does using !important on the width of the img div

CSS: Header:

.header-img {
    width: 100% !important;
    height: 40%;
    background-image: url('/v2/img/header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    position: relative;
}

body: 

body {
    padding-bottom: 60px;
    font-family: 'Finger Paint', sans-serif;
    width: 60%;
    margin: 0 auto;
}

HTML:

<header><div class='header-img'>title</div></header>

Upvotes: 0

Views: 294

Answers (1)

edan_develop
edan_develop

Reputation: 418

your working upside down. body is the wrapping element of the page, this is why it should have the maximum width/height. you can try to play with the "position" css attr on the header element but thats just bad practice.

you need to create something like:

<body>
<header style="width:100%;">title</header>
<content style="width:60%">wrapper for all content</content>

Upvotes: 1

Related Questions