I'm trying to get my background image to show up only once at the top of the page. When i open live preview (in Brackets) it load correctly, that is, only once. When i reload the page though it repeats as if there was no no-repeat tag used. If I delete a line and put it back the live preview goes back to showing the correct non repeating background but as soon as i hit reload in the preview window it goes back to repeating. please help.
Here is the code:
body {
background: no-repeat url('/Users/username/Documents/topatopa.jpg') ;
background-size:120%;
}
I have also tried the forms:
body{
background: url('/Users/username/Documents/topatopa.jpg') no-repeat;
background-size 120%;
}
And
body{
background-image: url('/Users/username/Documents/topatopa.jpg');
background-size 120%;
background-repeat: no-repeat;
}
And
body{
background-repeat: no-repeat
background-image: url('/Users/username/Documents/topatopa.jpg');
background-size 120%;
;
}
Any ideas???
Related
I want to use a GIF file as a background image on my web page but its not working when I style it in CSS.
CSS
Body{
background-image: url("1554323659436.gif");
background-repeat: no-repeat;
background-size: 50% 50%;
content:white;
width: auto;
}
I have ensured the GIF name is accurate, but the image isn't appearing in the page's background. Can someone help out?
Hope this answer helps. From my experience, gif images or images in general fail to appear when folder structure is not defined properly. Please check a standard format for attaching gif or any image type in html background
body {
background-image: url("[path_to_image]/1554323659436.gif"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Please note, all of the other attributes can be optional except the first one. Good Luck!
I have to set background image for my home page and I have used this css code:
<style type="text/css">
body {
background-image: url('/Images/emma-maersk.jpg');
}
</style>
However, it is not working. Can anyone help me.
Try setting its background-position and background-size:
body {
background-image: url('/Images/emma-maersk.jpg');
background-size: cover;
background-position: center center;
}
Check if the image exists. You can open Network tab in your browser's developer tools and check if this image is loaded properly.
Note that /Images/emma-maersk.jpg is not a relative path and means yourdomain.com/Images/emma-maersk.jpg. For relative path, you should use url('./Images/emma-maersk.jpg').
Also Add below lines in body{}
body{
background-size:cover;
background-position: 0 0 ;
}
And also Check Folder Spell and Case Sensitive.
For your addition, please make background-size: 100%
The shorthand method for setting background is
<style>
body{
background: url('Images/emma-maersk.jpg') no-repeat center center;
}
</style>
use it in CSS3
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
also add ".." before giving url if it exist in folder hierarchy.
I am new to CSS and am tinkering with a few options. I want a pic called 'toplayer.jpg' to be repeated horizontally at the bottom of my webpage. I have used this code in an external style sheet. The pattern repeats horizontally...however it floats to the top of the page.
body {
background-image: url("../Images/toplayer.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
Any suggestions for this noob would be appreciated. Thank you.
Your background declarations should work, I guess the issue is that the body tag has no height :
html,body {
height: 100%;
}
body {
background-image: url("https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
In my jQuery mobile 1.4.0 app I have a Page which contains a list view the Problem is that when I have added a background image for this page as the list elements are becoming larger as the background stretchs with the content and this apears clearly on mobile devices more than jsFiddle ,this is my jsfiddle .
How can I make the background image to be fullscreen and fixed , not stretched with the content? Please help me ..
Here How I add a background image to my Page:
#EmPListPage{
background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots- pinky.gif') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#PageContent{
background: transparent ;
}
In my case the solution was to use contain, like this:
.ui-page {
background: #000;
background-image: url("http://bettingmasters.info/wp-content/uploads/2013/11/19757-football-stadium-1920x1200-sport-wallpaper.jpg");
background-size: contain;
}
You will want to attach the background image to the document body instead of your container div. Using your CSS in the fiddle:
body {
background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots-pinky.gif') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#EmPListPage, #PageContent{
background: transparent ;
}
Fiddle: http://jsfiddle.net/chucknelson/6zKJg/
I've a webpage with a background image that needs to be kept sharp and in focus.
The problem is that to achieve that it obviously has to have a set size every time.
I need a way of filling in the remaining space (which will vary from screen size to screen size) with black.
The easiest way to see what i'm talking about is if you go to the webpage: (no self promotion meant)
http://hopeish.com
Particularly if you are using chrome and firefox - as safari is okay and IE isn't being affected in the same way
Any ideas how I can do this??
background: url(image.jpg) #000 no-repeat;
background:#000 url(image.jpg) bottom right no-repeat;
this way your picture will be at the bottom right and the rest will be filled with black.
You currently have:
body {
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Add background-color: black; to have a full black background.
body {
background-color: black;
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Or use the shorthand background property variant seen in the other answers.
http://reference.sitepoint.com/css/background
Achievable with simple CSS.
body {
background: url('http://hopeish.com/image.jpg') no-repeat top right black;
}
Here's a live example