All geek questions in one place

My background does not appear

For some reason, the background is not displayed.

This is 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');
}

This is the used html:

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

              U kan niet gelijk een nieuwe<br />
            laptop kopen? <br />
            We zijn de goedkoopste<br />
            van Friesland.
            </p>
          </div>
+3
source share
5 answers

Here you can use the redefinition order:

Make copy.css just include:

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

On your page, include them in order:

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

Any properties overridden in copied.csswill be defeated; otherwise, properties from original.cssare inherited.

0
source

If possible, the best way is to provide each page with a unique or useful class and / or body element identifier. So, for example, one page:

<body class="bg-custom">

and the other -

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

Then in your CSS you can change it like this:

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

#selector - , , () , CSS HTML . ( , , .)

+1

div:

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

bg mage , . bg, (lpa, fcs ..), bg.

0

CSS:

HTML FCS:

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

HTML LAP:

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

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');
}
0

sidebar_lap.

HTML sidebar_beige_lap

HTML

<div class="sidebar_lap sidebar_beige">
0

Source: https://habr.com/ru/post/1734766/

More articles:


All Articles