I was trying to set my page a background image and yet it didn't seem to work the way I expected it to. Here's the code:
body
{
background-image: url("sf.jpg");
background-repeat: no-repeat;
background-size: 100%;
font-family: "Kozuka Gothic Pro", Avenir, sans-serif;
}
I was wondering what went wrong here. Thanks in advance. Note: the image was in the same folder as the file i'm running.
Demo
Just a small change in your code.
body {
background: url("http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1");
background-repeat: no-repeat;
background-size: 100%;
font-family: "Kozuka Gothic Pro", Avenir, sans-serif;
}
Coz background size cannot be 100 it can be cover or contain, and use background instead of background-image and all, use a background-size:cover it will work
body {
background : url (ur image path);
background-size:cover;
width:100%;
//and other necessary code
}
Looks like you have double tab indent bring it all back on tab.
Change the permission of the image to 777 and the image will show up correctly.
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;
}
I have the following css in which I set the background and font:
.my_style_1{ background-image:url(field.jpg);
background-repeat: no-repeat;
background-size: cover;
height:950px;
font-size: 1.5em;
font-family:Arial, Helvetica, sans-serif; ;
font-weight:500;
color: rgb(255,255,255)}
and in ui.R I am using the following:
fluidRow(
box(width=12,
class="my_style_1",
div(br(),h1("Travel Diary"),style="position:relative;right:150px;text-align: center;")
)
My problem now is it seems like only the background css is working- not matter how I changed the font size it didnt work! However I did observe that when I increased the font size- the br() height increases but i don't know what is going wrong here.
Okay I figured it out. I used the wrong tag h1. Once I changed it to p it actuallly worked.
enter image description here
I am getting a background image from external CSS to display. When I check in the element inspector it shows me invalid property used.
body {
font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
background-image: url(../img/background.jpg);
background-size: cover;
overflow: hidden;
}
What am I doing wrong here?
Use 'background', not 'background-image'. I.e.
background: url(../img/background.jpg);
You have written background-image:url(..img/background.jpg) this is correct,may be you have inserted a wrong path or may you have leave a space in "background.jpg" file like this.."backgroung .jpg" While crating th image name.. Check it out..i have leave a large space in image file for ur understanding,there may be one space only
This is pretty weird. At work and on my iPhone I can see my website's background-image. However on my home computer (Mac) I can't see it. The background is just white. How can that be and how can I solve this weird issue?
Here's the styling:
body {
background-image: url('../gfx/background.png');
background-repeat: repeat-y;
background-repeat: repeat-x;
font-family: 'Lato', Arial, Verdana, sans-serif;
}
The image file (a1.jpg) exists and in the same folder. But it doesn't show up, only the font's color become white.
Anyone can explain me why and how to fix it?
<style type="text/css">
p,h1,h2,h3,h4 {
font-family: Verdana, Geneva, sans-serif;
color: white;
}
a {
text-decoration: none;
}
body {
background-image: url('a1.jpg');
}
th,td {
font-family:Arial, Helvetica, sans-serif;
color:white;
}
</style>
If your title is right, you need to set a background color before the image.
It's very unclear what you are asking... Do you want to have a backrgound color and an image?
background: #ffffff;
background-image: url('a1.jpg');
the value of the background-image should be like this form and should be in the same folder:
background-image:url(../img/1.jpg);
The image file (a1.jpg) is exist and in the same folder ...
In which folder, though? The html page's folder, or the CSS file's folder? The path will only work if the image is in the same folder as the CSS file.