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 !!
Related
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(); :)
I want to add a GIF image to my webpage via CSS, the size of the image should be 100px X 100px.
The file structure is as follows:
Folder:
/index.html
/car.gif
I have added the JSFiddle of the code. Can someone correct it? The GIF is not getting displayed on index.html:
Code
<html>
<head>
<style type="text/css">
#position {
background-image: url('car.gif');
width: 25px;
height: 25px;
position: absolute;
}
</style>
</head>
<body>
dd
<div id="position"></div>
ss
</body>
</html>
The image (car.gif) must reside in the same directory as the CSS if you do not specify an absolute path. For this reason, the JS fiddle is useless. Check to make sure that your files are in the places you suggested they are in.
You also might benefit from a more explicit background statement, such as:
background: url('car.gif') top left no-repeat transparent;
Moreover, if your image's native size is 100px by 100px, you will need to resize it to see it properly:
background-size: 25px 25px;
I updated the other fiddle to include a more relevant version for your question:
http://jsfiddle.net/qtxg2jz5/6/
To answer Astro's comment, I can't comment on posts because I don't have enough reputation yet.
I have tested your code in my browser by replacing an image from my desktop and Image was showing up.
Once just make a change to its width and height :
width: 25px;
height: 25px;
to
width: 100px;
height: 100px;
Also Once Check this...
Ex : If our Page Url is :
www.yoursite.com/css/index.php
make sure car.gif can be accessed if you replace index.php with car.gif,
www.yoursite.com/css/cars.gif
is accessible or not.
Thats nothing but means that that file should be in same folder..
try them and hope you will get results you need..
Make sure the file car.gif is exist at the same directory or use absolute url to the image
DEMO
I have the following html:
<div class="A">
<img src="image1.png" width="100px" height="100px"/>
</div>
In my media queries css style sheet, I would like to replace that image with another one (image2.png).
What is the css code I need to write?
I tried the following:
.A img
{
background:url("image2.png") no-repeat;
}
But this doesn't seem correct?
If you are using CSS3, then content is the answer:
.A img
{
content: url("image2.png");
}
You can't modify that in CSS, instead, use a div like this:
<div id='#theImage'></div>
Then in CSS:
#theImage {
width:100px;
height:100px;
background:url("image1.png") no-repeat;
}
Then you can restyle the div using a media query.
Your code doesn't work because the image in the original <img> tag is a foreground image, which is different from a background image.
So setting the CSS doesn't get rid of the original image. And in addition, although the CSS does work, the background image it displays is shown behind the foreground image.
In order to do this, you need to either have the original image as a background image (ie set using CSS background-image property), or switch to replacing the foreground image in your script. This would involve setting the src attribute:
$('.a img').attr('src','newimage.png');
you're setting a background of an img element you won't be able to see, because the image defined in its src attribute is covering it
Anyway if both the images are relevant for the context from a semantic point of view, you should not use css to place the second image in place of the first one
If you put background on an image, the image will simply overlap the background; making the background totally invisible.
The solution is to make the image as a background of an element
Like so: http://jsfiddle.net/PabXF/
.image-replacement {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>
I have a web page that loads two images from a css sprite like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="arrow low"></div>
<div class="arrow high"></div>
</body>
</html>
and the css (stylesheet.css) looks like this:
.arrow
{
height: 239px;
width: 260px;
background: url('logotypearrows.png') no-repeat;
}
.arrow.high
{
background-position: 10px 0px;
}
.arrow.low
{
background-position: -1003px 0px;
}
The web page looks perfect but I can't print it. I can't see the dynamically loaded arrows. Anyone that knows how to solve this problem? I want to be able to print out the arrows and I want to load them from a css sprite.
By default browsers do not print background-images, this can be changed by user.
Maybe you should add some content inside div <div class="arrow low"><span class="print-only">*</span></div> and make it visible only for print version of your page with #media print.
Quick fix:
You can have a custom css class for media type print like this,
#media print {
.printable {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
And add this class to your divs,
<div class="arrow high printable"></div>
This will print your background images in Chrome, Firefox and Safari.
Note: These css options are non-standard - so, quite risky to use these in production. Also, this won't work in Internet Explorer - you need to enable the option "Print background images" from File --> Page Setup.
Cross-browser fix:
Instead of using divs with css image sprites as background, you can use actual images with the same logic you have applied in your classes. For an example, you can check my JsFiddle here
In which image you have to print?
It's up to the user and their browser settings to print or not print
background images. To keep yourself from relying on that, put the
images in the foreground in HTML. —Kon
(taken from this related thread)
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.