OK so I have been having issues getting sprites to work on my website, so I decided to rewrite the w3 sprite tutorial from scratch to see what I was doing wrong. Here is the code I wrote:
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="img_navsprites.gif" alt="">
<img src="img_trans.gif" alt="" id="home"><br><br>
<img src="img_trans.gif" alt="" id="next">
</body>
</html>
style.css
#home{
width:46px;
height:44px;
background: url(img_navsprites.gif) 0 0;
}
#next{
width:43px;
height:44px;
background: url(img_navsprites.gif) -91px 0;
}
When I open this in Chrome the first image shows up but not the separate images. I have no idea what I have done wrong, by every account this code should work.
If you will look closely to example on W3 then you will see that you need "img_trans.gif" to be proper img file as well. It is just one pixel image in their example.
IMG element displays 'alt' attribute, which is empty in your code, when your 'src' is incorrect.
Related
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing including adding display: block to the CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Home Page</title>
</head>
<body>
<div class="logo">
<img src="images/logo.png" alt="Stuff logo">
</div>
<div class="button">
<button type="button">Home</button>
<button type=button>Contact</button>
</div>
</body>
</html>
This is the only things I have in my css file:
body {
margin: 0 auto;
}
.logo {
max-width: 200px;
max-height: 200px;
}
.button {
border: 3px solid green;
}
sir here is final answer
sir you had given the class logo to the not to the img
so you have add class to the img not to the
if css you have just do this
<div class="logo">
<img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="Plants and Things logo">
here is css
.logo img {
max-width:20px;
}
this will work
There are few region behind it
for example
you didn't link the css file with html file.
size of your logo may be smaller then max-size
but as solution i would suggest you to use the css in the img for the temporary solution
like this
try to change with this
<img class="logo" src="images/logo.png" alt="Plants and Things logo" style="max-width: 20px;max-height:20px">
also by using the
body{
background-color:red;
}
you can check that your css file is linked or not
also check the console errors
I'm familiar with html/css, but while experimenting with background-image:url(), nothing shows up. My html is very basic to test this out; my image path name is correct. I've exhausted all my resources and nothing is working.
Here is my html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<img class="pic">
</body>
</html>
CSS:
.pic {
background-image: url(/Users/leslienguyen/Desktop/bgBullet4.png);
background-size: cover;
}
I've already tried using (-webkit-)background-size, background-attachment, and checked if the files are all in the same location. The background sometimes works when I put height specific px but never works with auto either. I'm super stuck.
Thanks!
You must have a width height for your pic. I used a random image below for the purposes of running the code.
.pic {
width:100%;
height:100vh;
background-image: url('https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg');
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<img class="pic">
</body>
</html>
you are trying to add a background image to an image tag <img /> ! this is not how the img tag works
You can insert an image by using the src attribute
<img src='/Users/leslienguyen/Desktop/bgBullet4.png' />
Or set the background to your body by simply moving the class='pic' to the body tag
<body class='pic'>
</body>
Try to add '' '' before and after your url adress.
Try inserting your PNG File into Imgur, and then embedding the imgur link into the code, so do
.pic {
background-image: url((IMGUR URL.png);
background-size: cover;
}
I am creating a test website with Angular, just to learn some things. First I put everything into the index.html, and this is the look I came up with:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
I then copied this html code and entered it into the app.component.html. Back in the index.html, I changed
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
to
<body>
<app-root></app-root>
</body>
But then my Site started to look like this:
Where did I make the error? My app.component.css is empty, so there is nothing able to change the look of that background. I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill. When I put this into the app.component.css:
body {
position: absolute;
}
,then i get this:
I'm just a starter in html/css, but all the tutorials about background images changed nothing for me
Looks like you have two body tags, according to your answer ofc :)
One here (index.html) and second in app.component.html:
<body>
<app-root></app-root>
</body>
You can probably keep body into app.component.html, but you should remove it from index.html. And apply display: block; height: 100% for app-root, I suppose.
I'm having trouble displaying a Base64 image inline or in css-file.
i'm using vs-2017.
Can someone point me in the right direction?
<!DOCTYPE html>
<html>
<head>
<title>Display Image</title>
<link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<img class="slide1" alt="" />
</body>
In that CSS file some simple code is written that loads the image.
.slide1 {
background: url(data:image/png;base64,iVBORw0KGgo)
}
the problem is the image can not loaded or display .
any advice
So I've got a simple little domain up with a fileserver.
I want the main page just to be an image.
I also want that image to take up half of the browser window's height, so I write up a bit of html with in-line styling. Yes, I am a beginner at this stuff, so all I know for now is basic html and css.
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;">
I try it out and the image happily displays at full resolution, completely ignoring my styling, so I play with it a little and I eventually find out that something like
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;">
and
<img src="fruit.png" alt="a bowl of fruit" style="width:50%;">
work just fine, but the reason I use a percentage is because I want the size to scale according to the browser window size.
So I'm trying to figure out what I'm doing wrong here, or if there's some bug or I'm just being an idiot and the fix is painfully obvious.
The img has to have an absolute position! Otherwise a max-height doesn’t do anything.
Furthermore the value "auto" isn’t allowed.
<style>
img {
position: absolute;
max-height: 50%;
}
</style>
<img src="fruit.png" alt="a bowl of fruit"/>
or
<img src="fruit.png" alt="a bowl of fruit" style="position: absolute; max-height: 50%;"/>
First of all, you should use CSS in a linked file and not inline, like you do right now. This makes managing changes incredibly easier. Take a look at this minimal example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
The style.css file would contain all your styles, like:
img {
max-width: auto;
max-height: 500px;
}
An alternative for small pages is writing the CSS within the <style> tags, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
img {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Even better, use classes:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.image {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img class="image" src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Regarding your question, I assume what you want is dynamically fill the half of the browser window with an image. This is possible with a rather new unit called viewport height (vh). Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.half-viewport {
height: 50vh;
width: auto;
}
</style>
</head>
<body>
<img class="half-viewport" src="http://lorempixel.com/1280/800/" alt="image">
</body>
</html>