Background image - full screen

HTML-CSS
1

Hello here,

I currently have a small issue to put my background image in full screen. I mean, out of the body width.

First, I defined : width: 900px; and margin: auto; to the body.
Second, I created an html div element for the background image with CSS position: absolute; and right: 0; but there are still margin left and right.

My question is: How can I make the background-image full screen (it should exceed the body margins left and right).

My code below (I removed the url from the img):

HTML:

(...)
<body>
    <main>
      <div id="background-image"></div>
      <div id="container">
        <div class="container__image">
          <img src="#" id="logo" alt="Maison Mauricette's logo">
        </div>
(...)

CSS:

/*GENERAL*/
html, body{
  background-color: #f5f5f5;
  margin: auto;
  width: 900px;
  position: relative;
}

body{
  font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
  font-size: 0.9em; 
}

body, #background-image{
 background: url(#) top left repeat-x;
  width: 100%;
  position: absolute;
  right: 0;
  left: 0;
}

Thank you in advance for your precious help!

Manon

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

I’m not sure I completely understand the question (a working codepen would be great!), but I’d recommend against setting your html and body to have a width of 900px; especially if you want a child element to have full width.

If you want some contents of the page to have 900px width, just set that element directly (maybe your #container ).

4

Hey @manon_boiteau!

If you are asking about creating a full page image then you could try this

5

Understood :slight_smile: I didn’t know.

6

Thanks a lot, I will have a look!

7

Thank you! I get it by putting a width of 900px on a container with height of 100% on the background-image :-).