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

Having trouble getting PostCSS nesting to work with CSS variables in Tailwind CSS and Next.js?

I've been attempting to utilize PostCSS nesting alongside CSS variables, but unfortunately the CSS variables are not being converted at all. Instead, I am seeing Invalid property value in the DOM for CSS Variables. The tailwind.css file I have inclu ...

cssnext.jstailwind-csspostcsscss-variables

Safari not centering element with justify-self in CSS grid

My challenge involves adjusting the alignment of a div (mobile menu) that is currently centered using css grid and the justify-self property in chrome. However, when viewed in Safari, it appears on the left side of the screen behind the Instagram icon: ht ...

htmlcssvue.jssafariwebkit

I am looking to bring in just the tables from a different html/php page

I am currently working on a webpage that includes a php library, header, and other elements. I only need to import specific tables and information from this page onto another screen display, with the tables arranged side by side instead of vertically. My ...

phphtmlcss

Is there a way to modify the color of ASCII art letters within HTML's <pre> tags?

For this illustration, I aim to transform the letter "y" into a shade of blue. ,ggggggggggggggg dP""""""88""""""" Yb,_ 88 `"" 88 88 88 gg gg 88 I8 8I gg, 88 ...

htmlcssasciiascii-art

Having trouble displaying SVG elements in Material UI

Currently, I am faced with an issue while trying to display a .svg file in the header of a drawer using Material-UI and create-react-app. Instead of the expected .svg image, all I see is a broken image rendering. Any assistance on resolving this problem ...

cssmaterial-uicreate-react-app

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

javascripthtmlcss

Angular material input featuring an additional component

Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon: The closest approach achieved so far can be seen in this example: <md-content la ...

csstwitter-bootstrap-3material-designangular-material

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

What is the best way to arrange cards in a specific order with breaks in between each flip

I am currently working on creating flip cards using HTML and CSS. I have successfully implemented the hover effect which flips the cards when hovered over. Now, my goal is to make the cards automatically flip one after the other at specific time intervals ...

javascripthtmlcss

Exploring PHP Queries with Div Classes

I'm in desperate need of assistance. I'm currently working on putting together a website and pulling data from a mysql database. The specific div that I'm trying to populate is provided below. The issue I'm facing is how do I integrate ...

phpjqueryhtmlmysqlcss

Issue with the alignment of a sidebar on a website's html page

Last week, I embarked on the journey to learn HTML and CSS. To put my skills to the test, I decided to recreate an old web page using what I have learned so far. The specific page I am trying to emulate can be found here: However, I am currently facing so ...

htmlcsswebweb-deployment

When using NextJS, the dynamically generated HTML elements do not get affected by CSS repaint

Recently, I encountered an issue while working on a Next.js project involving the addition of an external script that uses vanilla JavaScript to dynamically create nodes. Despite importing global CSS at the top of my _app.js file, I noticed that the styles ...

javascripthtmlcssreactjsnext.js

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click. The Issue My problem arises when the menu expands, causing it to scroll all the way to the bottom of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize a combination of min-height percentages and pixels on a single div element

Currently searching for a method to explain min-height: 500px; min-height: 100%; the reason behind my decision to utilize this? The div must be either 100% in size or larger to allow for overflow. The height should only be set to 500px when the screen i ...

css

Ways to show text on top of an image using CSS

Seeking help! I'm attempting to overlay some text on top of an image, here's the link: http://jsfiddle.net/5AUMA/31/ The challenge is aligning this text to the bottom part of the image. I've tried using this CSS: .head_img p { position ...

htmlcss

Incorporating custom CSS and HTML into the link is essential for enhancing the appearance of KnpMenu

I'm working with the KnpMenuBundle and I need to customize a link that has the route 'uri'=>'#'. How can I achieve this? The desired link should be styled like this: <a href="#" class="js-sub-menu-toggle"> <s ...

htmlcsssymfonytwigknpmenubundle

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

javascriptcsscanvascordovahtml5-canvas

general declarations take precedence over media queries

One of my usual CSS rules looks something like this: #dayslist > div { height: 51px; } Then there's the media query CSS rule: @media (max-width: 979px){ #dayslist > div { height: 44px; } } However, whenever I resize my bro ...

cssresponsive-designmedia-queries

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

I am currently working on creating a react material ui AppBar. The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side. However, I have been facing difficulty in making the logo al ...

cssreactjsmaterial-uicss-grid