I seem to have no past to speak of

The issue persists as the background fails to display.

Here is the CSS code:

div.sidebar_beige {
background: no-repeat left top;
height: 142px;
margin: 35px 0 35px 0;
position: relative;}

div.sidebar_beige h3 {
    color: #f57f20;
    font-family: 'trebuchet ms';
    font-size: 17px;
    left: 15px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 15px;
    width: 163px;
}
div.sidebar_beige p {
color: #454343;
font-family: 'trebuchet ms';
font-size: 12px;
left: 15px;
margin: 0px;
padding: 0px;
position: absolute;
top: 42px;
width: 165px;}

div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}

This is how the html is implemented:

<div class="sidebar_lap sidebar_beige">
            <h3>
              Laptop Reparatie
            </h3>
            <p>

              If you cannot purchase a new<br />
            laptop immediately? <br />
            We offer the most affordable prices<br />
            in all of Friesland.
            </p>
          </div>
cssbackground-image

Answer №1

To enhance organization, consider assigning unique and descriptive classes or IDs to each page on the body element. For instance, you could have:

<body class="bg-custom">

for one page, and

<body class="bg-custom-right">

for another. This allows you to easily modify elements using CSS in this manner:

.bg-custom #selector { background-img: url(...);}
.bg-custom-right #selector { background-img: url(...);}

Here, #selector is the specific element you wish to customize for each page without having to duplicate styles or create new classes. This approach streamlines your CSS and HTML code, making it more manageable and straightforward. Additionally, you can apply this technique to other elements requiring per-page editing as needed.

Answer №2

Utilize the sequence of overrides to your benefit in this situation:

Create copied.css with the following content only:

div.sidebar_beige_lap {
  background: url('../pictures/sidebar_backup_computerfix.png') no-repeat left top;
}

Incorporate them on your webpage in this order:

<link rel="stylesheet" href="primary.css" />
<link rel="stylesheet" href="copied.css" />

If any properties are superseded in copied.css, they will take precedence, otherwise attributes from primary.css will be adopted.

Answer №3

When creating your div, make sure to include two classes:

<div class="sidebar lap">...

Separate the background image from the sidebar class so that it can be used by all divs. Create new classes for each unique background you require (such as lpa, fcs, etc), and only include the background image in these classes.

Answer №4

The background image is currently assigned to the sidebar_lap class.

Within your HTML code, you are referencing sidebar_beige_lap

To make the necessary change, update your HTML as follows: 

<div class="sidebar_lap sidebar_beige">

Answer №5

Utilizing multiple CSS classes for styling:

HTML FCS:

<div class="sidebar_fcs sidebar_beige">...</div>

HTML LAP:

<div class="sidebar_lap sidebar_beige">...</div>

Applying Single CSS:

div.sidebar_beige {
 background: no-repeat left top;
 height: 142px;
 margin: 35px 0 35px 0;
 position: relative;
}
div.sidebar_beige h3 {
 color: #f57f20;
 font-family: 'trebuchet ms';
 font-size: 17px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 15px;
 width: 163px;
}
div.sidebar_beige p {
 color: #454343;
 font-family: 'trebuchet ms';
 font-size: 12px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 42px;
 width: 165px;
}
div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}

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

"Encountered an error while trying to access properties that

Struggling to create a practice menu with the functionality of making elements appear and disappear on click? If you are encountering issues with a class named "option" not working as expected, you are not alone. Clicking on nested objects like images or i ...

javascripthtmlcss

How can you create a blurred effect on a navbar?

Looking to achieve a unique blur effect in the background of my navbar component. The standard CSS blur effect isn't giving me the desired result, so I'm seeking some guidance on how to customize it. For example: https://i.sstatic.net/bPEXZ.png ...

htmlcss

Ensure that CSS is integrated correctly

I have a main Django template that incorporates another template for the navigation bar. I currently have separate CSS files for both the main page and the navbar. My query is: what is the correct method to include the CSS from the navbar in the main p ...

htmlcssdjangodomdjango-templates

Floating elements are misaligned and not laying out correctly

I've encountered an issue where the footer div is appearing behind the right-hand side div. I have a central container div with two floated divs next to each other, and the footer is separate. I've spent hours trying to fix it but can't figu ...

htmlcsscss-float

How to keep a div element fixed on the page's border vertically and horizontally adhered

Would you mind visiting the following link: and observing the layout of the page? My goal is to affix or "attach" a small div element to the right side of the page, just slightly outside of the right frame of the page. Vertically, I want this div to be ...

csshtmlpositioningfixed

Ways to horizontally align 2 rows in React

I am in the process of developing a react app and I have encountered an issue with aligning the field names horizontally with their corresponding field values in multiple columns. Despite my efforts, the alignment still appears to be a bit off. Below is th ...

javascripthtmlcssreactjsalignment

Is it possible to modify specific elements on a webpage by clicking on various links?

I'm in the process of developing a website for a store. On the product page, I have general information displayed about all the products fetched from the database. I am looking to create a separate page that will showcase different text and images bas ...

javascriptphphtmlcss

Tips for resizing an image to perfectly fit on a compact HTML5 canvas without sacrificing its quality

I need assistance with my code. I'm trying to draw an image on the canvas while maintaining its quality. const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); canvas.width = 360px; canvas.height = 360px; const img ...

javascripthtmlcsscanvas

Prevent child div from resizing along with parent div during a resize event by utilizing the .resizable()

Check out this example here I am able to resize the div using jQuery, but I don't want the #spacer to have a fixed width at first because the content of the could vary in size. Even if I remove: width:100px; and try setting it to a percentage or ...

javascriptjqueryhtmlcss

Creating a custom loading spinner featuring your logo

Hello, I am looking to create a custom loading spinner using CSS, JS or any other method with my logo. I have the logo in PNG, GIF, and SVG formats and would like to use it for long site loads, image loads, or any other loading processes within my Vue3 pro ...

javascriptcssvue.js

Utilizing block buttons within a div containing a Bootstrap button group

My dilemma is trying to center a button group within a container while also making each button occupy half of the container's width. I've attempted using "w-50" and "btn-block," but they don't seem to work when in conjunction with "btn-group ...

cssbootstrap-4

Struggling to properly position my dropdown menu without causing the div content to shift downward

<div id="header"> <a href="#" id="logo"></a> </div> <div id="nav_cont"> <ul id="nav"> <li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li> <li id="communities_btn">< ...

css

Ensure that the left menu remains fixed at full page height of 100%

I'm currently working on developing a website layout that includes a left menu bar and right content section, both of which are independently scrollable. However, I'm encountering a few challenges: The left menu bar doesn't cover the enti ...

htmlcss

Alter color upon click using jQuery

I am facing an issue with my code where I want to make it so that when a user clicks on one of the glyphs on the side of the page, elements with ids starting with the same letter will remain black while everything else, including other glyphs, turn grey. ...

javascriptjquerycsscolors

Vertical words standing alongside an upright line

My goal is to rotate the text without any issues, but I'm having trouble with the line underneath it. The line should adjust its length based on the length of the text. In other words, as the text changes in length, the line should shrink or expand ac ...

htmlcss

When using the `:hover` pseudoclass, it appears that it does not apply to the `<p>` element, but it does work

While hovering over the <a>, I noticed that it changes color correctly. However, when I hover over the <p>, nothing seems to happen. It's puzzling why the <p> does not change color upon being hovered over. If I switch the selector t ...

htmlcsshoverpseudo-class

What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

I am looking for a way to have my images wrap with text align in this specific layout: <html> text text text text text <br> text text text text text <br> ______________ text text text <br> image | text text text <br> i ...

htmlcssimagealignmentword-wrap

How can you utilize CSS grid to position an alternate symbol alongside ordinary text?

Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...

htmlcsscss-gridcentering

How can I add an image to a canvas using a button?

Having trouble with my studies and looking to create a custom shirt website. Posted below is the beginner code I have: If anyone knows how to upload an image onto a shirt canvas using a button, as well as change the shirt color with another button, please ...

javascripthtmlcsscanvas

Exploring elements using dynamic xpaths in selenium

When working with Selenium WebDriver, I am facing difficulties selecting the <input class="cs-autocomplete-input" tabindex=""> element due to its fluid ID. This is because there are multiple items with the same class name on the web page, making it c ...

htmlcssselenium