Creating a pseudoresponsive CSS background image using absolute positioning

This code has got me scratching my head a bit, mainly because I'm not completely grasping it. Here's the code snippet in question that is supposed to show a responsive background image on the header:

.home .site-header-main:before {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background-color: transparent;
  background-image: url('/images/home-menu/home_honey_drip.png');
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 35%;
}

My goal here is to have the 'home_honey_drip.png' displayed below the menu text and then overflow it above the body content. I've attempted to add position: absolute;, but it seems to make the image vanish.

Your help with this would be greatly appreciated.

cssbackground-image

Answer №1

To achieve the desired effect, consider using position relative and moving the menu content to the top.

You can accomplish this by structuring your code with two divs - one for the image and another for the menu content.

#menu{ 
    top:-100px; 
    position: relative;
    color:white;
}

For a visual reference, feel free to refer to my jsfiddle example. Simply include the necessary additional CSS styles for your image.

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

Achieving the display of font-weight 100 for Google web fonts successful

I have been experiencing difficulties in achieving the ultra-thin display of the Lato font through Google web fonts. Despite appearing correctly on Google's website, the font weight does not change when implemented on my own page if it is below 400 (I ...

csswebfontsgoogle-webfonts

The web server experiences a layout and functionality breakdown caused by an issue with the config.js file following the uploading process

I recently created a website. However, when I uploaded it to my hosting company's server and tested it on different browsers, the layout appeared broken. Some of the CSS files loaded properly, but certain elements and styles were not in their correct ...

phpjquerycsshtml

Discover the power of the jQuery :closest() CSS selector in your

Looking for a CSS selector equivalent to the $.fn.closest() function, such as: $('.wrapper:eq(0)>h1>strong:closest(.wrapper)') The goal is to have the implementation return the .wrapper element that is the first on the page, containing an ...

javascriptjquerycssjquery-uijquery-ui-draggable

Utilizing the power of Bootstrap, you can create a row of eye-catching

I am struggling to get 3 columns of cards to display in a row using bootstrap and CSS. Currently, only 2 columns are showing up. Here is the code snippet: <style type="text/css"> .card{ width: 350px; } </style> ...

htmlcssbootstrap-5

Place a div according to the location of the mouse click

Is there a way to create a popup in Angular 4 that appears next to the mouse click coordinates? I want it to work similar to how events are created in Google Calendar. ...

javascriptcssangular

Line 1: Position a section of the content on the initial line.Line 2: Then place the remainder

Within a paragraph element on WordPress, I have a value displayed using ACF. The paragraph is contained within a div with a maximum width and centered text alignment. I am seeking a solution that will allow me to achieve the following: "If the default d ...

javascriptjqueryhtmlcss

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

htmlcsscss-float

parent element has a grid child element that is overflowing due to CSS

Creating a React app has led me to a situation where I need to exhibit a grid to the user. The definition of this grid is extracted from the backend as an object. My objective is for the page to occupy all available space, with a header and footer in place ...

htmlcssreactjs

Animation unveiling of text slides

I have been working on designing a unique button for my personal diet app project that involves a sliding text effect when the mouse hovers over it. I'm almost there, but I've encountered a major issue that seems impossible to solve. I want the s ...

htmlcsstwitter-bootstrap

Customizing the appearance of checkboxes in React Material-Table filtering feature

Is there a way to modify the style of checkboxes in filtering? For instance, if I wish to adjust the dimensions of the checkbox that appears for the Birth Place field, what steps should I take? https://i.stack.imgur.com/pZLqQ.png ...

cssreactjsmaterial-uimaterial-table

Steps to position the dropdown scrollbar to the top every time it is opened

I am working with a unique drag-and-drop multi-select dropdown that only has a unique control ID. The issue I am facing is that when the dropdown is initially opened, the scroll bar is at the top. However, after scrolling down and closing the dropdown, the ...

javascripthtmljquerycssangularjs

Is there a way to choose the following element within Nokogiri without utilizing the "next_element" method?

Upon running my code on a different machine, I encountered the following issue: Error: ruby: symbol lookup error: /usr/local/ruby/lib/ruby/gems/2.1.0/gems/nokogiri-1.6.7.2/lib/nokogiri/nokogiri.so: undefined symbol: xmlNextElementSibling At the start of t ...

htmlcssrubyxpathnokogiri

The class "col-md-*" is not functioning properly when used with an Infragistics grid

I am working with a simple HTML table and an Infragistics (igx) grid to display data: <div class="container"> <div class="row"> <div class="col-md-4"> <table> </table> </div> < ...

cssangularinfragisticsignite-ui-angular

Experiencing issues with the redirect button on the navigation bar of my website

Video: https://youtu.be/aOtayR8LOuc It is essential that when I click a button on my navigation bar, it will navigate to the correct page. However, since the same nav bar is present on each page, it sometimes tries to redirect to the current page multiple ...

javascripthtmlcssweb

Are there any other CSS properties that can achieve the same functionality as "contain: content;"?

Searching for an alternative to the contain: content; CSS property that is compatible with older browsers. Is there a solution out there? Perhaps a CSS hack or workaround? ...

htmlcss

Hiding the +/- button in Vue.js based on specific conditions

Is there a way to hide the +/- button when there are no items below? Current Challenge Example Sandbox Link <template v-for="item in SevenLengthlist" :key="item"> <ul> <li><input type="checkbox" id ...

htmlcssvue.js

What is the inner workings of CSS?

I'm curious about the inner workings of CSS. Does the HTML get interpreted before CSS, or vice versa? Or does it all apply as soon as the browser has constructed the DOM? I would appreciate a detailed explanation on this topic. ...

css

How to alter the color of a Twitter bootstrap progress bar

Recently, I have been exploring Twitter bootstrap and encountered an issue while trying to customize the progress bar. Despite my efforts, I am unable to display the progress bar on the screen. Here is the code snippet that I have been working with. Despi ...

htmlcsstwitter-bootstrap

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

htmlcssangular

Web page glitch repaired: Top fixed div now functioning properly

I am currently facing an issue with a fixed header and full-screen background image. The problem arises when I try to display an alert on top of the page, pushing down the header and hero section. However, I am encountering difficulties as the alert eith ...

htmlcss