I want to set my background styling in a css stylesheet, but want to select the background image in the html file. Whilst the style is going to be same across the website, the image needs to be different on each page.
Example of code:
==== CSS ====
body {
backgound-position: center;
background-repeat: no-repeat;
background-size:1200px 800px;
background-position-x: center;
background-position-y: 50px;
}
==== HTML ====
<html>
<head>
<link href="../css/custom.css" rel="stylesheet">
</head>
<body style="background:url('../img/Car.jpg');">
</body>
</html>
This does not seem to work. The styling in CSS is being ignored. Please note that the paths are correct, as all other elements work...
Also, I'm using a Bootstrap template.
Please help!
Thank you
D.
You wrote background:url('../img/Car.jpg'); using only background: will set EVERY background property. Simply change background:url(); with background-image:url(); :)
Related
I'd like to know if I can add background colors instead of background images because they sometimes don't show :). Usually, I would just use the background-image: URL(""); like usual, but again, sometimes they wont show.
Actually, it is not bad at all to determine a background colour when working with background images.
div {
background-image: url("https://via.placeholder.com/500/green");
background-color: black;
height:500px;
width: 500px;
}
<div>123</div>
You can add both the background-color and background-image on the same element for the color to serve as an alternative
You can change background with css especially, but here some example of code, I hope it will help you.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<p>You can use custom background color also with css</p>
</body>
</html>
You can use the background-color or just background property. There are 2 ways of doing it. Either you can use use css using the <style> tag, or you can just edit the css in the html element itself if you just want to add 1 line of css. Example - <div style="background: red;"></div>.
I've been trying to add a background image to the 'header' tag for a while now. I'm sure the problem is probably really simple and I have checked the names of my files and path, but I still can't find a solution
Does anyone know what the problem is?
Here is the html:
<link rel="stylesheet" type="text/css" href="main.css">
Here is the css:
header{
width: 100%; height: 100vh;
background-image: url('../img/sciencecool.jpeg');
}
I would really appreciate a response, thank you.
Are you using a class .header or the html header tag? Have you checked if the image and Css path are correct?
in html at first write :
in css write :
.header {
background-image : url
}
I know there are similar questions but they don't exactly answer my problem. Am trying something really simple, turning a background image into a link, am following a tutorial and he did it easily so i tried it but it just didn't work, the image just doesn't show, i did all my checks from the tutorial but it just doesn't work for me.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="s017.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
<h1>CSS</h1>
</body>
</html>
body{
font-family: open-sans, sans-serif;
}
#fb/*, #tw, #sc, #in, #ig, #wa*/{
height: 60px;
width: 60px;
display: block;
position: absolute;
}
#fb {
background-image: url('image03.png');
background-position: 0px 0px;
}
as for the result:
as you can see there is nothing in there other than the title
i taught it was the browser but i tried it with Mozilla and Chrome with same result.
If you are trying to use this as thumbnails, I recommend just using images instead of trying to set background images. When you are setting the background image, it isn't resizing the image, but showing a small 60x60px section of the image in the background. If the top left corner is white, that's what you are seeing. Instead of background image, try this:
<a href="https://www.facebook.com">
<img id="fb" src="http://blog.addthiscdn.com/wp-content/uploads/2015/11/logo-facebook.png">
</a>
Here's a working codepen showing what I believe you are looking for. If this isn't exactly it, or there's a reason specifically you must use background image, let me know and i'll update my answer to reflect.
At first please be sure that your link for CSS file is working , As you know you should put your Style codes in s017.css file that is in your html file folder.
Probably your image size is big and didnt fit in your 60*60 (a) tag block or your image have a white space in left top position that you intered.For the first you can use background-size in css for " #fb " :
background-size:contain;
and for the 2nd probability you should crop your image with paint or other image editors.Of course,you can set the position in center of image but this is not recommended.
I hope this work for you!
Have fun !!
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
I'm new to HTML and CSS in general. Please help me with the code. I cannot get the background-image to appear in my browser although i typed the syntax correctly. All i get is an orange box, with no alert.png image. I'm following an online tutorial btw: http://dev.opera.com/articles/view/31-css-background-images/#thecode
Edit 1: The image, html file and css file are all inside the same folder. Yet no success.
Edit 2: I used an unique css file name instead of a generic "style.css" (which i have several of them in my system) and it worked! Make sure there's no space between url and the parenthesis.
HTMl code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>alert message</title>
</head>
<body>
<p class="alert">
<strong>Alert!</strong>
This is an alert message.
</p>
</body>
</html>
CSS code:
.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}
The url must be a string:
url("C:\Documents and Settings\USER\My Documents\alert.png");
I would guess it's a permissions issue, regardless you will most likely have problems with the URL being a file reference when you move this to a server, I would recommend moving your image into the same location (or better yet an image folder in the root of your site) as your html file and then modify your css to be this
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
}
Another way of doing things is to put your text into a div, and set the image as the div's background image using css, like so:
<div class="alert">
<p>
<strong>Alert!</strong>
This is an alert message.
</p>
</div>
And, for the CSS:
.alert {
width: 20em; (Width of entire div, which includes text and bg image)
background-image: url('../alert.png');
background-color: orange;
margin: auto;
padding: 2em;
}
You can see the live JSFiddle example here: http://jsfiddle.net/Cwca22/TdDJY/
Also, in the code above, the background image will tile (repeat) both horizontally and vertically to fill the space of the div. In order to prevent this, you could make the div the same height and width as your background image, or put background-repeat: no-repeat in your css under the .alert class.
Hope this helps and good luck!
Please check your URL, if possible you can use firebug which is addon of firefox, which will definitely help you, by indicating if image has been loaded or not.
Else another solution would be give height to your alert class as follows
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
height: /* height of image*/
}
First put your alert.png picture in the same folder as your html file.
Then try this in your CSS file:
body {
background: orange url("alert.png") no-repeat;
}
I think the problem was the "\" in \alert.png
Good luck!
In the original question he had in his css
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
I ran into problems with a gallery page that had images as background thumbnails. Any image filename that had spaces would not appear. It was only the fact that one image happened to have underscores in place of spaces and that did appear that I was able to track it down. As there are spaces in his url, this could be the problem. I fixed my problem by using \ to escape any characters like spaces causing the problem. i.e.
A\ space\ in\ the\ filename.jpg
though this might not work in a Windows pathname!
If the image is in the same directory as the script he shouldn't need the full url anyway.