This is my first question (and first post) on Stackoverflow. Hope to contribute more once I become skilled enough.
Anyway, I'm having trouble understanding why my background image appears when I reference it using css that's inline with my html, but not when I put it in a separate css stylesheet that the html links to.
Here's what my inline css looks like, which works fine:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
</style>
My styles.css file is shown below, which contains the exact same code:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
p {
font-family: 'Helvetica Neue' Helvetica;
font-color: white;
}
h1 {
color: white;
font-family: 'Helvetica Neue';
font-size: 3.5em;
text-align: center
}
.textbox {
background-color: beige;
height: 100px;
width: 100px;
padding: 10px;
margin: 50px auto;
text-align: center;
font-family: 'Helvetica Neue' Helvetica;
font-weight: 200;
}
</style>
...but it no longer shows the background image. Everything else from the css file (paragraph formatting, text size/color, etc.) shows up in the browser just fine.
Also, the html file, css file, and background image are all in the same directory. So I figured I don't need to use "/background.jpg", "../background.jpg", etc. which I've seen suggested in other cases in other posts on Stackoverflow.
I tried to find an answer to this but couldn't find one. Any help is greatly appreciated!
But, in a separate .css file, I typed the exact same code as above, linking to it in the html file by using:
Did you remove the <style> & </style> tags from the CSS file ? For example, like:
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
These HTML tags are only required around your CSS rules if you're including CSS directly into your HTML.
i need to see your file and folder structure.. makes sure the the stylesheet you are referring is in the same folder where the html is, if so the same code will do.. if you css is in another folder like in css/styles.css than you have to change the link as well as the href of stylesheet to something like ../image.png
the folder structure matters here
Take the style tags out of your .css file.
Related
I'm trying to use the background-image property on a small site I'm making, but to no avail. Here's the code:
body {
background-image: url(/images/Pangolin.png);
background-size: center;
font-family: arial, "Times New Roman", Times, Serif;
color: #fff;
font-size: 32px;
line-height: 20px;
}
I'm 99% certain the path is correct. I've tried putting the path in quotes, but nothing seems to be working.
Random shot here but hell, maybe it'll work.
I'm assuming that you're using BEM file structure here.
I think you're just forgetting to go up a level, try putting two periods before the first forward slash if the images folder is in the root level.
So it'd look like;
background-image: url(../images/Pangolin.png);
use cover for background-size
body {
background-image: url( path to image );
background-size: cover;
}
This is my code:
html, body {
background: url("media/images/maishahotbgimg.jpg") repeat;
It only appears on the homepage. I want it to appear on every page of my web
You create a main.cs file that you will insert in all your HTML files. This si, you Can get all the html files having the same background image.
You can use a single .css file linked in all your pages and apply the background in the css, for example:
body {
font-family: 'Open Sans', sans-serif;
background-color: #000000;
color: #FFFFFF;
background-image: url(../../imagesfolder/backgroundexample.svg);
background-size: cover;
}
I tend to use a background color in case the img can't load properly (connectivity issues or whatsoever)
I'm new to js and I was following a tutorial to learn about node.js.
I used middleware and tried to adapt my css file into pages. But only a part of css file doesn't work even though I just copied and moved the whole style part from html file to css file.
Here is my style.css.
<style type="">
body {
background: skyblue;
font-family: verdana;
color: #fff;
padding: 30px;
}
h1 {
font-size: 48px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
h2 {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
p, li {
font-size: 16px;
text-align: center;
}
And only background: skyblue this part doesn't work.
The part I handle with static files is just like this.
app.use('/assets', express.static('assets'))
All other styles does work and I have no idea what is the cause.
Remove <style type=""> from your CSS. That's HTML, not CSS.
The skyblue color is equal to #87CEEB - might try and change to a HEX color instead as it seems node.js has trouble interpreting the skyblue color.
You can see the color references here CSS Colors
It is not possible that only a part of CSS is not working.
Inspect body tag and check from where it is picking background style.
Include your CSS right after the the CSS file from which background style is currently picked.
My most probable guess is it is picking background style from some other file.
Make sure there is no in-file and inline CSS giving background style.
or use
background: skyblue !important;
I'm learning css and xhtml through a website called html.net. I'm following their instructions while working on my own website. I've just started the CSS tutorials on image background and i am encountering a small but annoying problem. When I do this, everything is fine. Meaning, there are pirate ships all over the place. It looks like the spanish armada.
body {
background-color: silver;
background-image: url("pix/pirateship.jpg")
}
h1 {font-size: 40px; font-family: arial; color:yellow; background-color:#0000a0;}
h2 {color:maroon;}
li {font-size: 20px; font-family: arial; color:#87f717; background-color:#34282c;}
table {color:black; background-color:gray;}
th {color:black;}
But... when i try and follow the next example, this is not showing any image at all.
body {
background-color: silver;
background-image: url("pix/pirateship.jpg")
background-repeat: no-repeat;
}
h1 {font-size: 40px; font-family: arial; color:yellow; background-color:#0000a0;}
h2 {color:maroon;}
li {font-size: 20px; font-family: arial; color:#87f717; background-color:#34282c;}
table {color:black; background-color:gray;}
th {color:black;}
I suspect this has something... actually, I don't know enough to start suspecting. I'm just gonna leave this one to you guys, and hopefully somebody knows the solution.
PS All of that is in a css file in the same folder as the index file. When I try and use any of the no-repeat, repeat-x or repeat-y values all of my pirates vamoose. The regular background image shows just fine when I don't use those.
you're missing a semi-colon after the background-image selector in your second example. If this is an copy and paste of your code, then that missing semi-colon is the problem.
I'm using Bootstrap with Rails and can't get the brackground color and image to show up together. I have a custom CSS stylesheet where I'm trying to edit the body to have a dark background with a small image in the bottom right corner, like this:
body {
padding-top: 55px;
background-color: #2e2e2e;
background-attachment: fixed;
background-image: url('waves.png');
background-repeat: no-repeat;
background-position: right bottom;
}
Problem is that the image doesn't show up, just the background. If I remove the 'background-color' it shows up and looks perfect, but I can't get them together. I know I'm missing something small (probably stupid too). Appreciate the help.
Have you tried this way?
body {
padding-top: 55px;
background: #2e2e2e url(waves.png) right bottom no-repeat;
background-attachment: fixed;
}
make sure the file extension is .css.erb
body {
padding-top: 55px;
background: #2e2e2e url('<%= asset_path('waves.png') %>') fixed no-repeat right bottom;
}
Not sure about the environment you're in, but have you tried !important ? It adds priority in case there are styles with different values applied somewhere later in code.
body {
...
background-color: #2e2e2e !important;
background-image: url('waves.png') !important;
...
}
Try to put the waves.png file in /assets/images and replace url('waves.png') with this:
background-image: image-url('waves.png');
I'm assuming you're using assets pipeline and your CSS file is preprocessed by Sass (the stylesheet filename ends with .css.scss), for more information I suggest you to read the Asset Pipeline Rails Guide.