I have custom Galauness template on blogger (http://nethoroskop.blogspot.com) but I would like to upload my own image...Can you tell me how? In html code there is NOT
body{ background
There a lot of other backgrounds (like post background,total-wrapper background, lightbox-container-image-data-box background,etc) but not body.background at all!
You need to find and edit this section to add your own background image:
body {
background: #ffffff;
background-image: url(http://i1273.photobucket.com/albums/y417/trynitezoo/winterpaper_zps5a2f39a3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
margin: 0;
}
or you can override the background image. You only need to copy and paste the following code in the header tag section and replace the YOUR NEW IMAGE PATH to the image url you needed:
<style>
body {
background-image: url('http://YOUR NEW IMAGE PATH') !important;
}
</style>
If you want to change the background of the body to an image this would be the best way. Change the <body> to this:
<body background="image.jpg">
Tutorial from : http://www.w3schools.com/tags/att_body_background.asp
Related
Path for my HTML-file: C:\Users\Name\Documents\Coding\Battleship\index.html
Path for the picture: C:\Users\Name\Documents\Coding\Battleship\Water.jpg
I tried to add it as follows:
body {
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
background-size: cover;
}
However, it is not working. Does anyone know how to solve this issue?
You can't do like this
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
You can place the image is project root(or subfolder) and use as below
Assume your project folder is Battleship
If you place Water.jpg in root(as below)
Battleship
-index.html
-Water.jpg
then use this
body {
background-image: url("./Water.jpg") no-repeat center center;
background-size: cover;
}
If you place Water.jpg in subfolder (as below)
Battleship
-index.html
-images
-Water.jpg
then use this
body {
background-image: url("./images/Water.jpg") no-repeat center center;
background-size: cover;
}
Check this w3schools.com source
Please refer the below tested code.
The problem was you were using background-image which only accepts one parameter, you were supposed to use background which is a shorthand for writing all the background properties into one.
Refer: CSS background [last section]
You need to change the below CSS
body {
background: url("Water.jpg") no-repeat center center;
background-size: cover;
}
Code example:
html, body{
width:100%;
height:100%;
margin:0px;
}
body {
background: url("http://lorempixel.com/400/200/") no-repeat center center;
background-size: cover;
}
<html>
<body>
</body>
</html>
Not sure if this is too late to answer but I think the problem is very simple. You have done the right thing with the URL, here is the tricky bit: the link to your URL has a backward slash(there's no need for using CSS to correct this) ie:
Yours:
Path for my HTML-
file: C:\Users\Name\Documents\Coding\Battleship\index.html
Correct Answer: should have a forward slash
Path for my HTML-file:
C:/Users/Name/Documents/Coding/Battleship/index.html
just make a folder & put both files into it and link your image path simply.
I've looked for the answer on everyone of questions that are similar to this question but nothing seems to work. Basically I created a test document to test the background image feature as it wasn't working on my main site.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" text="type/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
This is a test.
</body>
</html>
CSS:
body {
background-image: url(image.jpg) no-repeat;
}
Nothing shows apart from "This is a test." I have checked to see if the image is in the same place as the styles.css sheet, and it is. Can anyone help me please?
You can't combine background-repeat in background-image.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
Use background background instead of background-image if you are using no-repeat etc.
body {
background: url(image.jpg) no-repeat;
}
According to W3 http://www.w3schools.com/cssref/pr_background-image.asp background-image property can be attached to the body tag.
The only reason you don't see it is no-repeat in the wrong place - it is the property of background itself, not a background image.
So here is the code you should use case you actually do not want to see image repeating:
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
your image url is important to give it:
I hope solved with this.
1- in own folder: "./image.jpg"
2- in out folder: "../image.jpg"
3- or root relative path(eg asp.net): "~/pictures/image.jpg"
4- or relative path: "../pictures/image.jpg"
body
{
background-image: url(./image.jpg);
background-repeat: no-repeat;
}
I need repeat as background image gried.png image in welcome.blade.php in My app. I need create class selector file in css folder for this.
this is My welcome.css file in public/css folder
.background-image{
background-image:transparent url("/imgs/grid.png");
background-repeat:repeat;
}
This is my welcomeblade.php file
<link rel="stylesheet" href="/css/welcome.css" />
<div class="background-image"></div>
But this code did not generate any result, how can I fix this?
transparent is not a valid value for background-image. It's a value for background-color.
.background-image {
background-color: transparent;
background-image: url("/imgs/grid.png");
background-repeat: repeat;
}
should work.
See it here (with a different url for the image): https://jsfiddle.net/h0revzu5/
Just try background-attachment:repeat;
Example of background-repeat:
body {
background-image: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
background-repeat: repeat;
}
OR
Also by default it repeats when you set background,
body {
background: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
}
Default background-color is background-color:transparent;
I'm using Bootstrap and I want to have a background image and over it some text, images or whatever. The problem is Bootstrap CSS displays elements with some kind of background and, of course, ruins the result.
You can see the example with Bootstrap here and without bootstrap here.
How can I remove this default background bootstrap uses?
The code is:
HTML
<center><div>
<h1>This is a test</h1>
</div></center>
CSS
html {
width: 100%;
height: 100%;
background: url('http://static.panoramio.com/photos/original/24446619.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: opacity(0.9);
-webkit-filter: opacity(0.9);
-moz-filter: opacity(0.9);
-o-filter: opacity(0.9);
}
Bootstrap sets the css of body as follows within the first few lines of code body { background-color: #fff; } . My recommendation for this is to go into your bootstrap.css file and remove that css.
If you are using a cdn, you can add the following after you have your <link> to the bootstrap css:
<style>
body { background-color: inherit; }
</style>
this will override the bootstrap css loaded.
See my update to your fiddle here: http://jsfiddle.net/1Ldykff2/2/
Try setting the background color to transparent. (You could use none but I've found it can be troublesome at times. Not really sure why.)
Fiddle: http://jsfiddle.net/1Ldykff2/3/
body {
background: transparent;
}
There's a css rule on the body of your html that bootstrap that gives background-color: #fff;
In your own CSS, you could put
body {
background-color: none;
}
This will override bootstrap's code.
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.