Image overlaying the full width of body content background

I am trying to find a solution to my problem, but so far no luck. The Body selector has a max-width of 85%, and there are other selectors like header which I want to have a background image that spans 100% of the width behind the body selector attribute.

HTML Code -

<body>
  <header>
    <div></div>
   </header>
</body>

CSS Code -

body {  
  width: 85%;
}

.header {
        display:flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        text-align: center;
        justify-content: center;
        background-color: rgba(0,0,0,0.8);
        background-image: url(../assets/header-bg.png);
        background-repeat: no-repeat;
        background-position: center 120%;
        background-size: cover;
        overflow: visible;
        padding: 10% 0 10% 0;

.header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.5);
    }
cssbackground-image

Answer №1

First off, your CSS selector is incorrect. You are targeting the element not the header class, so there's no need for a period (.) before it. Secondly, if you want your header to span the full width of the screen, you can utilize viewport units. 100vw represents the full width of the viewport, with 1vw being 1/100th of it. However, you will also need to adjust the positioning of the header within the body.

Your updated code would resemble this:

body {
  width: 85%;
}

header {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  background-image: url(../assets/header-bg.png);
  background-repeat: no-repeat;
  background-position: center 120%;
  background-size: cover;
  overflow: visible;
  padding: 10% 0 10% 0;
  /* here */
  width: 100vw;
  margin-left: 7.5vw;
}

header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}
<body>
  <header>
    <div></div>
  </header>
</body>

Answer №2

It seems like this could be the solution you are seeking, but if not, please provide further details:

To achieve the desired effect of having the background cover 100% width and the header at 85% width, simply set the body to 100% width and apply the background directly to it.

<body>
    <header>
        <div></div>
    </header>
</body>

body {
    width: 100vw;
    min-height: 100vh;
    background-image: url(../assets/header-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0;
}

header {
    height: 10%;
    width: 85%;
    margin: auto;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: black;
    padding: 10% 0 10% 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The height of the <div> element is not increasing along with the content inside. If I set the height to "auto

I encountered an issue with my webpage design. It has set dimensions with blue borders on the sides and bottom. The problem arises when I add Facebook comments to the page - as more comments are added, they extend beyond the bottom of the webpage, below ...

csshtmlborder

I am experiencing difficulty transitioning the view in React Native from a side position to an inward direction

Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference: The Desired Design: My Current Progress: The basic structure is in place, but hitting a wall when attempting to cu ...

javascripthtmlcssreact-nativereact-navigation

CSS Style for Organizing Content

I'm struggling to create CSS for a hierarchical display, resembling a tree structure of files and folders. Currently, I am using nested unordered lists in my HTML: <ul> <li>animals<ul> <li>dogs</li> <li>c ...

htmlcsshtml-lists

Picture hidden beyond the words

I am trying to achieve a layout where an image is displayed behind an H1 tag, with the width of the image matching the width of the text. Here is my code: <div style="display: inline;"> <img src="http://img585.imageshack.us/img585/3989/m744. ...

htmlcsscss-position

Don't conceal the :after and :before elements when using CSS custom checkboxes

I have created my own custom checkboxes using this CSS code: input[type="checkbox"]{ display: none; } .checkbox{ position: relative; width: 60px; height: 19px; background-color: green; border-radius: 10px; } .checkbox input[type="checkbox"] + ...

htmlcssbuttoncheckbox

Launch the jQuery Fancybox on a separate webpage

I am facing an issue where I have a link in my index.html page and I need it to open a div located in another page named index2.html, but for some reason, it is not working. This is the code I currently have: Link in index.html <a href="#modal" id="o ...

javascriptjqueryhtmlcss

Firefox having trouble displaying styles correctly

I just finished creating a website for my band, but I am having issues with it displaying correctly in Firefox. While everything looks great in Chrome and Safari, it seems like the stylesheet isn't loading at all in Firefox, leaving the page looking u ...

cssfirefox

Responsive div not displaying background image

Here is a straightforward and easy-to-understand code snippet: HTML markup: <div class="jumbotron text-center top-jumbotron"> </div> CSS: .top-jumbotron { background: #ffcc00; background-image: url('../../bootstrap/img/home-pag ...

htmlcssresponsive-designbackground-image

Utilizing JavaScript to dynamically adjust the height of one div to match the height of another div

Struggling to adjust the height of one div to match another using the following code: var aboutheight=document.getElementById('about').offsetHeight; document.getElementById('sampledogs').setAttribute("style","height:aboutheight"); Des ...

javascriptcss

I seem to be having trouble getting my style to work properly with Material UI's makeStyles

I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fin ...

cssbootstrap-4material-uimaterial-table

Fluid Design - Extra Spacing at the Bottom with Percent Margin-Top

Currently, I am working on developing a website using only percentages. However, I have encountered an issue with my main content section. I have set a margin-top of 10%, but this is causing excessive spacing at the bottom of the page and resulting in a sc ...

htmlcssfluid-layoutspacing

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

htmlcss

Maximizing the efficiency of Java Script code

I am struggling with optimizing this JavaScript code that adds and removes classes based on the presence of a specific class in the next rows of a table. Can anyone provide some guidance on how to make this code more efficient? $(".showTR").click(functi ...

javascripthtmlcss

Guide to setting up collapsible sections within a parent collapsible

I came across this animated collapsible code that I'm using: https://www.w3schools.com/howto/howto_js_collapsible.asp Here is the HTML: <button type="button" class="collapsible">Open Collapsible</button> <div class="content"> &l ...

javascripthtmlcss

Tips for positioning text underneath an image with HTML and CSS

I'm attempting to align two links below an image as text. The HTML I have works perfectly in Chrome and Firefox, but not in IE, where 90% of our internal users are. Here is the code: <div style="float: right;"><img src="sites/default/files/ ...

htmlcssdrupaldrupal-7

A guide to creating smiley emojis using solely HTML and CSS

Is there anyone who can assist me in constructing this happy face? https://i.sstatic.net/yyYYQ.png ...

htmlcss

Positioning an image/carousel at the bottom of multiple without the need for alignment

I'm in the process of creating a single-page website with sections stacked on top of each other, including a section where divs are stacked both next to and on top of each other. Within this section, there is a container div that holds 5 divs named bo ...

htmlcssbootstrap-5

Vue.js displaying incorrectly on Windows Server 2019 IIS post deployment

Once I run npm serve, everything runs smoothly. However, when I deploy my app with an API in an ASP.NET application, it doesn't scale properly. I am using Router and History for navigation. Anonymous user authentication is enabled and static content h ...

cssvue.jsiiswindows-server-2019

Theme.breakpoints.down not being acknowledged by MUI breakpoints

The Challenge: Implement a hamburger menu to replace the navMenu on tablet and smaller screens After successfully compiling in VS code terminal, encountering an error in the browser: Error Message: TypeError: Cannot read properties of undefined (reading ...

javascripthtmlcssreactjsmaterial-ui

Investigating Jquery Flip Card Issues

Looking to create a set of flip cards using HTML, CSS, and jQuery. Currently facing an issue where only the first card is flipping when clicked. Any suggestions on how to modify the jQuery code to make it work for all cards would be highly appreciated. C ...

javascripthtmlcssaddeventlistener