I am currently having issues with Safari not displaying background images and background colors in my css. Apparently its just the homepage.
#footer {
background-color: #00594c;
}
#home_widget_1 {
background-color: #00594c;
color: white;
height: 485px;
border-right: 1px solid white;
background-image: url(https://www.fvcolumbus.org/stage/wp- content/uploads/2016/12/independent-living1.png);
background-size: 510px 282px;
background-repeat: no-repeat;
margin-right: 0px !important;
background-position: center top;
}
#home-featured-image {
height: 540px;
width: 100%;
display: block;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
background-image: url(../stage/wp-content/uploads/2016/10/10192016_homepage.jpg);
background-repeat: no-repeat;
}
Apparently I had caching issues.
Related
section {
position: relative;
width: 100%;
height: auto;
min-height: 500px;
padding: 40px 0;
color: #333;
font-size: 14px;
background-image: url("a.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-origin: content-box;
}
My css code but background starts at begining of website not under header? how can i solve problem
summary of problem
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 7 years ago.
I have 5 CSS classes. They are completely identical except one line. Is there a way to create one CSS class, then have the 5 other CSS classes inherite from the one and just add it's own specific's?
As you can see below the only line that is different is this line...
background-image: url("../Images/vertTabsButton2.gif");
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton2.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
Without using a pre-compiler like SASS you cannot achieve inheritance. However you could accomplish something like what you want by splitting the common properties out into a single class and applying the remaining unique properties through some other ID or class.
.commonProperties {
float: left;
border-style: none;
border-width: thin;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
background-image: url("../Images/vertTabsButton2.gif");
}
.divMasterCol1Button1 {
background-image: url("../Images/vertTabsButton2.gif");
}
Here's your HTML
<button class="commonProperties divMasterCol1Button1"/>
<button class="commonProperties divMasterCol1Button2"/>
Here's your CSS
.commonProperties {
float: left;
border-style: none;
border-width: thin;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
background-image: url("http://www.gettyimages.ca/gi-resources/images/CreativeImages/Hero-527920799.jpg");
}
.divMasterCol1Button1 {
background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
}
I recommend using SASS or LESS. Here's an example of it would look like for both pre-compiler languages with your class
SCSS
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
#extend .divMasterCol1Button1;
background-image: url("../Images/vertTabsButton2.gif");
}
and here is LESS
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
.divMasterCol1Button1;
background-image: url("../Images/vertTabsButton2.gif");
}
I prefer SCSS because bootstrap 4 is beginning to use it for their framework.....
Simply use CSS:
.c1,.c2,.c3,.c4,.c5{
//common styles
}
.c1{
//c1 special style
}
...
.c5{
//c5 special style
}
See example http://jsfiddle.net/qj76455e/
I wanted to make the principle readable, therefore I used short class names c1,...,c5 instead of divMasterCol1Button1 etc.
Use 2 or more classes. OOCSS, SMACSS or BEM will be great tool.
.button {
...
}
.button--red { color: red; }
Or you can achieve this with #extend operator in sass, less or stylus.
Hi,
like i said it in the title background-image:none; is not working since with css3 background-image:url('...'); return a new layer each time the file is new. i'm trying to remove image as my media query change the background size.So i was wondering what was the workaround that. Can any one help?
#splashHeader div.headerSplash{
height: 254.5px;
width: 100% ;
display: block;
background: none ;
background-image: url("/static/woman350.jpg");
background-position: center;
background-size: auto 254.5px;
background-repeat: no-repeat;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media all and (min-width: 640px) {
#splashHeader {
background-color: initial;
padding: 0;
position: relative;
background: none ;
background-size: 350px;
background-image: url('/static/woman500px.jpg');
background-repeat: no-repeat;
background-position: right top;
background-size: auto 350px;
}
}
#media all and (min-width: 768px) {
#splashHeader{
background-color: initial;
padding: 0;
position: relative;
background-size: 350px;
background: none;
background-image: url('/static/woman600px.jpg') ;
background-repeat: no-repeat;
background-position: right top;
background-size: auto 350px;
}
}
#media all and (min-width: 960px) {
#splashHeader .innerSection{
height: 500px;
background: none;
background-image: url('/static/woman_maximumSize.jpg');
background-color: initial;
padding: 0;
position: relative;
background-size: auto 500px;
background-repeat: no-repeat;
background-position: 70px 0px;
}
}
the imge that is stiking is the one with the one with background-position: right top;
It works just fine out of the box, your error must be somewhere that you haven't shown us.
div {
background-image: url('http://jsfiddle.net/img/logo.png');
background-color: black;
width: 125px;
height: 23px;
margin-bottom: 10px;
}
div + div {
background-image: none;
}
<div></div>
<div></div>
Do not use background: none in your CSS.
The reason is that, background: none makes all the background properties as none.
May be because of this your other background properties are failing to work.
Just remove the background: none CSS from everywhere and try to run the code.
I found that the following CSS instruction does not resize the DIV background image showing in IE9. Do you have any idea?
HTML:
<DIV id=window20 class="window smallWindow">
<STRONG>abcde</STRONG>
<BR /><BR />
</DIV>
CSS:
.window {
Z-INDEX: 20;
BORDER-BOTTOM: #346789 2px dotted;
POSITION: absolute;
BORDER-LEFT: #346789 2px dotted;
PADDING-BOTTOM: 0.5em;
PADDING-LEFT: 0.5em;
WIDTH: 14em;
PADDING-RIGHT: 0.5em;
FONT-FAMILY: helvetica;
HEIGHT: 4em;
COLOR: white;
FONT-SIZE: 1.0em;
BORDER-TOP: #346789 2px dotted;
BORDER-RIGHT: #346789 2px dotted;
PADDING-TOP: 0.5em;
border-radius: 0.6em;
-moz-border-radius: 0.6em
}
.smallWindow1 {
BACKGROUND-COLOR: #558822
}
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: auto;
background-origin: content-box;
}
Try This
CSS
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
}
IE9 does support background-size, but the problem in your example is that you have background-size: auto, which means not to stretch the background! (Which is the default if you don't specify the property.)
Solution: use 100% 100% or cover or contain, depending on your needs.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I would have made a fiddle, but I don't have your background picture, and besides, the div in your example doesn't move, so it would not have been very illustrative.