css place background image for div for 100% width

Question

All I want is to place background image for div for 100% width. Could you please help me to find my mistake.

html

  <div class="slogan_background"> 
    <h2>Slogan</h2> 
    </div>

css

 background-image: url("../img/bg.jpg");
 background-repeat: no-repeat;
 background-position: center; 
 width:100%;
 min-height: 526px;

there are spaces on the left and right sides. If i remove no-repeat, it shows 100% — EducateYourself, Dec 10 '15 at 18:25
no-repeat means the image is repeated so if you look close then you will see the part of the same image.. but I agree with the answer below first try that if it solves your issue. — whatever, Dec 10 '15 at 18:31
yes i know that the size is smaller and that no-repeats means do not repeat — EducateYourself, Dec 10 '15 at 18:37

score 1 · Answer 1 · answered Dec 10 '15 at 18:27

1

Your code looks good but maybe you didn't set height and width for body tag. Try adding this to your css

html, body{
  width:100%;
  height:100%;
}

Also set padding and margin to 0 to remove spaces from the side

.slogan_background{
  padding:0;
  margin:0;
}

answered Dec 10 '15 at 18:27

Nakib

i added as you said but the result is the same – EducateYourself Dec 10 '15 at 18:33
I tried editing the template and it works good without any spacing on side – Nakib Dec 10 '15 at 18:44
@Nakib the background image is not stretched the way you expect.. you need `background-size` property – whatever Dec 10 '15 at 18:45

score 1 · Accepted Answer · answered Dec 10 '15 at 18:42

1

If I understand the issue correctly, this might help:

background-size: cover;

answered Dec 10 '15 at 18:42

cocoa

score 1 · Answer 3 · edited May 23 '17 at 11:59

1

Add the backgroun-size:100% 100%; duplicate here

edited May 23 '17 at 11:59

Community

answered Dec 10 '15 at 18:43

whatever

3 Answers3