Displaying a full-page background image using CSS3 is achieved by setting it below

I am attempting to configure a full page background image by using the following code in the css file

html { 
    background: url(images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

While it does display nicely, the image only appears below any content in the main body (such as the footer)

Any assistance on this matter would be greatly appreciated. Best regards, loaannis

Answer №1

If your divs are not displaying correctly, check your code structure: I have provided a sample code snippet below with a "main-content" div and a "footer" div nested within the "body" tag:

HTML:

<body>
    <div id="main-content">
        <p>1234 testing 1234</p>
        <p>main content goes here</p>
        <p>4321 testing 4321</p>
    </div>
    <div id="footer">
        <p>Contact information here</p>
    </div>

</body>

In addition, I have included CSS styling to enhance the visibility, such as setting the footer color:

body { 
background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main-content {color:yellow;}
#footer {position:absolute; bottom:0; color:white;}

To improve clarity, I have replaced the local image URL with a web image link in the example. Any valid image URL can be used for the background. Also, I changed "html" to "body" in the CSS as it is more appropriate to style the body of the page. However, even if you use "html" instead of "body", the styling will still work!

View the demo here: http://jsfiddle.net/Ee74C/4/

Keep coding, Thodoris

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

Unique style for custom vue multiselect component

I have implemented a Vue Multiselect component, but I am struggling to fully customize it with CSS styles. I have applied some CSS styles, but I am unable to achieve all the customization I want. Specifically, I want to modify the option height, select box ...

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

Resizing an image with six corners using the canvas technique

Currently, I am facing two issues: The topcenter, bottomcenter, left and right anchors are not clickable. I'm struggling with the logic to adjust the image size proportionally as described below: The corner anchors should resize both height and wi ...

Setting the font-size in HTML/CSS to dynamically adjust and fill the entire width and height of its

I'm trying to make a <div> element adjust its size based on the browser window. Within this <div>, there is a paragraph of text: <div style="width:80%; height:80%; margin:10%;"> <p>Paragraph of text. Paragraph of text. Pa ...

Creating a stylish login form with Bootstrap: How to effortlessly center it on your webpage

My login form is currently positioned to the left. However, I am trying to move it to the center of the page. I attempted some CSS styles without success. Interestingly, when I removed '{% extends "common/base.html" %}' from the code, the form di ...

What is the best way to create rounded corners on a WordPress login page?

I recently implemented the Custom Login Page Customizer plugin on my WordPress website and it has created a beautiful login page. While I was able to round the corners of my logo using CSS, I'm struggling to achieve the same effect on the login form. ...

Animating the starting angle of an arc using d3.js

I'm looking to animate the starting angle of an arc using D3.js. If anyone has any tips or helpful links, I would greatly appreciate it! Here's what I've already attempted: http://jsfiddle.net/87e3d4tj/ d3.select('#my-path').da ...

What is the best way to switch back and forth between showing and concealing JavaScript-generated images?

Though I've been gone for a while, I always find my way back, don't I (even if no one noticed)? The Goal in Mind All I really need are some images, grouped together with a main image. This main image will always be visible and will also act as ...

Change CSS style sheets depending on the size of the viewport

I've tried to implement the method from CSS-Tricks that allows for changing stylesheets based on the viewport width using multiple .css files and jQuery. However, my code isn't functioning as expected. I've spent the past hour trying to figu ...

"Effortless CSS Formatting in VS Code - A Guide to Automatic Styling

Recently started using VS code and I'm on the lookout for a solution to automatically format CSS whenever I save my work. Strangely, my searches haven't led me to any reliable extensions or clear guides on how to achieve auto formatting in VS cod ...

Is there a left and right margin when incorporating Bootstrap grid?

Currently, I am working on developing an Angular application and utilizing Bootstrap columns to easily format and space my page. However, I am facing an issue where there seems to be some unwanted margin around the element even though I have applied col-lg ...

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

Switch to light mode upon clicking the toggle?

On the top left corner of this page, there's a toggle for "Light/Dark mode". Clicking on 'Light mode' smoothly transitions to dark mode without any issues. However, once it's in Dark mode and you try to switch back to 'light mode&a ...

Having Trouble with Unevenly Spaced Child Elements in CSS Flexbox?

I'm running into a problem while utilizing CSS Flexbox to design a layout with multiple child elements. The issue at hand is that the child elements are not aligning correctly within the parent container. I aim for them to be evenly distributed and ce ...

Is there a way to customize the background color of Material-UI MenuItem when hovering over it through AutoComplete props?

AutoComplete utilizes the Menu component to display MenuItems as demonstrated in the documentation on those respective pages. I am looking to modify the backgroundColor of a MenuItem when it is hovered over. While I have been successful in changing the co ...

The process of toggling a div to slide up and down explained

I'm attempting to create a slide toggle effect on a hidden DIV when a user hovers over specific link buttons. JavaScript: $(function () { // DOM ready shorthand var $content = $(".sliderText"); var $contentdiv = $(".sliderCo ...

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

Switching over from an external style sheet to inline elements can be tricky, especially when it comes to integrating "dropdown" styles properly

I successfully created a stylish menu using a specific style sheet, but now I'm facing issues when trying to incorporate this menu into web pages with different style requirements. Realizing that loading the style sheet onto these new pages wreaks hav ...

Creating a border around an SVG element using the background color of its parent container

I am aiming to layer 2 SVGs on top of each other. The top SVG will have an outline to make it stand out more from the bottom SVG. These SVGs are embedded on buttons with transitions and hover colors. I want the outline SVG to match the background color of ...

I wish to have the sidebar shown initially, then be able to collapse it by clicking a button and adding a dropdown feature to the side of the menu items using Bootstrap

I am looking to implement a sidebar menu using Bootstrap. I want the ability to hide the menu, even on larger screens, by clicking a button. When collapsing the menu to the left side, I want the icons to display on the left as well. Clicking on a menu i ...