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
Related
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;
}
I uploaded a responsive site I did for a friend that does not render full width on the Index Page whether viewed on a smartphone or tablet.
The lady is doing me a favor as I try to get my name and work known. She has a business she'd like to see grow and we thought the Internet the place to start.
The odd thing is that site's other pages render just fine with proper width and height.
This leads me to believe the problem is with the "#media screen" queries.
I believed the CSS "width" and other properites and values in the full width, non-mobile page's code, would "cascade" down into the smaller mobile queries but added the properties "head," "html, body" and "footer" sections to see if that would improve the situation.
It did not.
The site can be viewed here: www.notaryonwheelsshaver.com
The CSS can be read here: http://www.notaryonwheelsshaver.com/css/nows.css
Any help would be greatly appreciated.
Your first media query (780px) has a typo in html,body -> height: 100%x; That may be interfering with the min-width attribute under it.
I don't know if that will fix it, but it's what I noticed.
I think the issue is in your CSS file:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
/*width: 100%;*/
}
/*width: 100%;*/ is commented out which makes the browser skip the code try changing it to:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
EDIT: You have the width also commented in:
.wrapper {
/*min-width: 100%;*/
min-height: 100%;
}
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 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 set my footer as fixed so that even if the page is scrolled down its footer will remain as is.
When I browse it in VS 2010 run/debug in Chrome, it works perfectly!
But when I deploy it to IIS 6.1, and browse it using Google Chrome it is not doing what I want. It does work, however, in IE and Firefox. Is this a Chrome-specific problem? I am doing something like this:
<div id="footer">
Footer goes here
</div>
Here's the CSS:
#footer {
background: #2d89ef;
bottom: 0px;
color: white;
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
height: 50;
left: 0%;
position: fixed!important;
position: fixed!important;
right: 0%;
text-align: center;
top: expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight?
document.documentElement.clientHeight:
document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.
body.scrollTop))+'px');
visibility: visible;
width=100%;
}
Please advice on possible solutions, thanks!
Try to (restart your IIS Manager then clear your browser cache. This might solve your problem.