I'm trying to set the background-image-property in CSS.
Here's my Code:
body{
background-color: #2C2F33 ;
background-image: url(https://i.postimg.cc/htbpRQ6f/0f73b4070e4238fe757656ba68e24c44af64c970.jpg);
background-size: cover;
background-attachment: fixed;
font-family: 'Roboto', 'Arial', 'sans-serif';
color:white;
}
Everything is working fine, but sometimes after starting Firefox, the Background-Image won't show up.
It will get loaded, if i'm using Strg+F5.
So the background-image isn't set properly in cache.
Does anyone know how to set it properly?
I shorted and update your code a little bit, It's worked on codepen every time. You could try it, Hope it will solve your problem.
The code:
body{
background: url("https://i.postimg.cc/htbpRQ6f/0f73b4070e4238fe757656ba68e24c44af64c970.jpg"), #2C2F33;
background-size: cover;
font-family: 'Roboto', 'Arial', 'sans-serif';
color:white;
}
Also see from code snippet:
body{
background: url("https://i.postimg.cc/htbpRQ6f/0f73b4070e4238fe757656ba68e24c44af64c970.jpg"), #2C2F33;
background-size: cover;
font-family: 'Roboto', 'Arial', 'sans-serif';
color:white;
}
Related
In a simple static webpage project, I have the following in my main.css:
.navbar-custom {
background: rgb(52, 73, 94);
background: rgba(52, 73, 94, 0.7); /* navbar-bgcolor */
background-image: url(../../images/distant-lights.jpg);
background-size: cover;
/* background-image: url(https://jessicasse.files.wordpress.com/2012/10/distant-lights-1-1152x8641.jpg); */
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 3;
font-family: 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif; /* heading font */
}
And this works as intended. However, if I modify the background-image line and specify the absolute path /images/distant-lights.jpg, the image does not show up.
The project structure is as follows:
Even though the HTML+CSS works with the relative path, I would like to know why the absolute path fails. As you can see, I tried out absolute URLs with http, and that works just fine.
/images/distant-lights.jpg
This is not an absolute path. An absolute path starts from a system root directory. On a typical linux system it looks something like this:
/home/username/somefolder/someotherfolder/projectfolder/images/distant-lights.jpg
I have a particular set fonts that I want to implement on a web application that I am building for my class project. Right now, I have it all hosted on GitHub via GitHub Pages. The index page currently uses 4 CSS files, one for Animate.css, the general CSS file for the whole application, Bootstrap's CSS file, and then another CSS file specifically for it.
On the general web app CSS file, named custom.css, I have the following code:
#CHARSET "ISO-8859-1";
#type-face {
font-family: FuturaStd-HeavyOblique;
src: url('fonts/FUTURASTD-HEAVYOBLIQUE.OTF');
}
#
type-face {
font-family: COUTURE Bold;
src: url('fonts/COUTURE-Bold.ttf');
}
.body {
background-color: black;
color: white;
height: 100%;
}
And here is my index.css file:
body {
background-image: url('../images/flyknit.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
-webkit-background-size: cover;
}
.indexTitle {
font-family: FuturaStd-HeavyOblique;
text-align: center;
}
h1 {
font-size: 500%;
}
.buttonBox {
margin-top: 150px;
text-align: center;
font-family: FuturaStd-HeavyOblique;
}
#bbText {
text-align: center;
}
a {
color: white
}
At first, the fonts were running fine on my computer, because I have them installed. But if I was to run the page through GitHub, the font does not show up. And recently, the font won't even run from my own computer. What did I do wrong? Any help is appreciated.
How about you try this in your fonts.css
#font-face {
font-family: 'FuturaStd-HeavyOblique';
src: url('fonts/FUTURASTD-HEAVYOBLIQUE.OTF');
}
call it back with
font-family: 'FuturaStd-HeavyOblique';
Not sure if quotation marks matter, but I believe #type-face should be #font-face
I use smint 3.0 for my webpage and I want to put some background picture but it doesn't work with pictures only with colors. I've tried with different pictures.
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #e5e5e5;
font-size: 12px;
background-image: url("pictures/background.jpg");
}
This seems to be working, but you haven't supplied much detail of your problem.
I added your code to a fiddle and included the smint 3.0 and jquery, and a background image shows up okay.
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #e5e5e5;
font-size: 12px;
background-image: url("http://www.crystalxp.net/galerie/img/img-wallpapers-windows-vista-editions-bg-pack-vaca-13740.jpg");
}
https://jsfiddle.net/joshvito/0tk25trf/
I have built a landing page for an external client all is working fine, I have a background image which fits the hole screen, I modified the existing body tag within the bootstrap.css class as follows
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Again this works perfectly when running locally, I then publish this site to the hosting environment, and when I navigate to the site all the content is displayed minus the background image, so I first assumed I have the wrong path so I checked the body style using firebug and this is what I see
body {
background-color: #fff;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
}
So for first glance I assumed "Oh that's strange it hasn't copied over my body styles!" so I repeat the process again and low and behold the body style remains as above, So i login to the server navigate through the files to the bootstrap.css find the body tag and again it looks as I expected
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Yet the image does not render.
What is wrong with this? I have tried ctrl f5, looked in the development tool bar checked for any 404 erros nothing displayed ? I'm baffled?!
Link to check www.danoneultimate.com.au
In the <head> section of your website, you load a different stylesheet.
<link href="/Content/css?v=WY2Ybti5pBJYm0QfqiFBL2b5U_cKoeAWQC9DALv4mnw1" rel="stylesheet">
Change it so that it loads bootstrap.css:
<link href="/Content/bootstrap.css" rel="stylesheet">
You have edited bootstrap.css but you're loading bootstrap.min.css.
Your code works just fine :)
I am trying to use a body background image which is center aligned, but it does not work in IE 6. The CSS for the body is
body{line-height: 160%;font-family: "Trebuchet MS", sans-serif; font-size: 80%;
/* background: #000a28 url('img/main_bg.png') no-repeat center top;*/
background-image:url('img/main_bg.png');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center top;
background-color: #000a28;
width: 100%;
margin: 0 auto;
color: #ffffff;
text-align: center!important}
For IE 6 I wrote the following CSS
body {
text-align:center;
}
#main-wrapper {
margin:0 auto;
width:960px;
text-align:left;
}
Please help me.
The reason why it's not working is because of the SuperSleight transparent png script you are using. Because the script runs only after everything's loaded, the background first centers, then jumps back to the left when the script runs. As far as I'm aware, AlphaImageLoader does not allow for background position to be changed.
Try using this script instead: http://www.dillerdesign.com/experiment/DD_belatedPNG/. It uses a different solution which should allow for background-position to be used.
Try my code instead of your body's properties
body{
background:url('img/main_bg.png') #000a28 no-repeat center top;
color: #ffffff;
font-family: "Trebuchet MS", sans-serif;
font-size: 80%;
line-height: 160%;
text-align: center;
}