My webpage is displaying the background image, but it is appearing behind all the other elements on the page

I've run into an issue where my background is showing up, but it's appearing behind my divs instead of alongside the content as I want. I can't seem to get it to work properly. I believe this part of my CSS code is causing the problem:

body {
    background-image:"C:\Users\Peter\Documents\onze server met div\achtergrond.png";
    background-color:;
    min-height: 100%;
    height:1500;
    list-style-type:none;
    margin:0;
    padding:0;
    overflow-y:scroll;
}

This is the full CSS code snippet:

body {
    background-image: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
    background-color:;
    min-height: 100%;
    height: 1500;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
}

... (more CSS styles)

#content {
    ... (content styling properties)
}

... (more CSS styles)

Here's a snippet of my HTML file:

<html>
<head>
<LINK HREF="C:\Users\Peter\Documents\onze server met div\Hetstylesheet.css" REL="stylesheet" TYPE="text/css">
</head>

... (HTML structure)

</html>

Thank you in advance for any help.

Answer №1

Consider trying a different approach, avoiding the use of inline CSS if possible since you have conflicting Background declarations - one inline and one in your stylesheet.

In your stylesheet, there are elements that are contradicting each other:

body {
    ...
    min-height: 100%; /*max-height:100%; will prevent an image from scaling larger than it's true size */
    height:1500; /* this is the height you'll get no matter what, by setting it explicitly
}

<body background="this will override your stylesheet">
... It would be advisable to remove it.

To address your question, <body> will always be positioned behind your content divs, with those divs being children of <body>. If you aim to create a background image that seems to be on the side of a <div>, ensure that <body> has sufficient width to accommodate the BG Image plus the width of the <div>s along with any desired side margins.

body {
   background:url(your.png) right 0; /* aligned to the right */
   background-size:80px 60px; /* CSS3 not good for older browsers (using an image you know is 80px wide, for example, would work best for browser compatibility. */
   min-width:###px; /*body bg img + width of div + any margins you want. */
}

div {
    max-width:###px; /* follow <body>s rule from above */
}

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 the Twitter Bootstrap navbar to display properly on mobile and iPad browsers

Is there a way to make the navigation bar float on mobile browsers when using the "navbar" and "navbar-fixed-top" classes? I've tried this on various devices like iPad (Safari, Chrome), Android (Firefox), and Windows Phone (IE), but it doesn't se ...

What is the best way to eliminate the space between the website's border and the image?

Is there a way to eliminate the space between the left and right borders? I want the picture to fill 100% of the browser window. https://i.stack.imgur.com/gqgOs.png img.test { display: block; outline: 0px; padding: 0px; margin: 0px; } <img c ...

How can I establish default values for 2 to 3 options in a Dropdownlist?

Is there a way to set two values as default in a dropdown list, and when the page is refreshed, the last two selected values are retained as defaults? Thanks in advance! Visit this link for more information ...

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

How can I select the specific element within a class when a particular checkbox is selected?

Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...

IE is causing issues with the transition

How come the transition doesn't seem to be working in this IE example? https://codepen.io/littlesnippets/pen/rxKBWq I've searched for solutions and tried adding recommended meta tags, doctype, etc., but nothing seems to work... /* This code ...

Switching the way hyperlinks behave when clicked, from requiring a double-click to a single

My code is working properly, but I need my links to open with just a single click. The issue is that the delete, approve, and not approve links require a double click for their function to run. I'm hoping someone can help me with this. index.php < ...

The alignment of the timeline in HTML CSS becomes distorted once it reaches the fourth element

As a newcomer to HTML, CSS, and JS, I am currently embarking on the task of creating a personal website for a course project. One of the pages on my website showcases a timeline featuring dates and information. While I have referred to a tutorial on W3scho ...

Encountering issues with Stylus when trying to compile the `@font-face

I'm diving into the world of CSS compilers with Stylus for the first time, and I'm facing an issue with loading Google Web Font URLs correctly. Below is the code snippet causing trouble: @font-face { font-family: 'Roboto'; font-st ...

Text that appears as an HTML button is displayed after being compiled using the $

I am attempting to generate a pop up dialog with two buttons using JS code in angular. The script below is what I am using to create the buttons... var html = $('<button ng-click = "cancelAlert()" > Cancel</button > <button ng-click="c ...

The WordPress issue of a background image not displaying properly when using both a linear gradient and an image

Code snippet: style="background-image: linear-gradient(151deg,#6a7a8f 9%,#8692A4 30%,#a9b1be 49%, #ced2d9 66%, #f1f0f1 88%),url(<?php echo $page['image']; ?>);" Within the div, only the linear gradient is visible. When I switch the order ...

Issues arise with animated content when viewed on browsers other than Chrome

After coding some jQuery, I noticed that the animation is working properly in Chrome but not in IE (version 11.0) or Firefox (32.0.3). Additionally, I found that if I omit 'opacity: 1;' from my animation class, the element will revert back to it ...

The Jquery code for Fullpage.js is causing unexpected behavior on the HTML page

While following a tutorial at the given link, I encountered an issue. Around the 9:08 mark, the instructor adds some JavaScript and demonstrates that fullpage.js is working. However, when I refresh the page after implementing the new code, it doesn't ...

Tips for eliminating the entire link from the footer section

Whenever a link is hovered over, a white box displaying the full URL appears at the bottom left of the browser. Is there a way to remove this feature from my website? I appreciate any assistance with this issue. Thank you! ...

Setting the color of an element using CSS based on another element's style

I currently have several html elements embedded within my webpage, such as: <section id="top-bar"> <!-- html content --> </section> <section id="header"> <!-- html content --> </section> <div id="left"> &l ...

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

CSS: Specify child element to have a full width of 100%, but appear only 50% wide

Looking at this page, it seems that the header photo is not displaying full width. #wrap { width: 990px; } #content-wrap { display: flex; } .image-header { display: block; width: 100%; } .image-header img { width: 100%; height: auto; } .cont ...

Ensuring Bootstrap4 columns have a minimum height within a row

How can I adjust the right column in this image layout to crop the height and match it with the left column, aligning the bottoms of the images? This customization should only apply to lg+ screen sizes. An ideal solution using Bootstrap 4 without jQuery i ...

Resize a group of images to match the parent's width and height dimensions

I am working with a div that contains variously-sized images and is nested inside a parent container. <div id="parentContainer"> <div id="boxToScale"> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/150 ...

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...