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
Related
I've been trying to learn HTML and have been following a tutorial online.(https://www.w3schools.com/html/html_css.asp) the tutorial does have some misinformation, so I've been looking on here for help as well. I have reached the point where you use external CSS files rather than using the <style> function.
My code is in /HTML/[ProjectName]/project.html, while my CSS is in /HTML/[ProjectName]/CSS/styles.css. Below are both files;
body {
background-color: powderblue;
}
h1 {
color: red;
}
p1 {
font-size: 200%;
}
<!DOCTYPE html>
<html>
<title> Linked CSS </title>
<head>
<link rel="style" type="text/css" href="/CSS/styles.css">
</head>
<body>
<h1> The CSS is in a separate doc </h1>
<p1> Let's see how this works out </p1>
<a href="/CSS/Styles.css" target="_blank">
<p2> Link to CSS file </p2>
</a>
</body>
</html>
From what I've read the css is properly linked to my file, and when I open the link it opens to the css page. What am I doing wrong?
Make sure you update your code to match your correct filename.
If your CSS is stored in the /HTML/[ProjectName]/CSS/style.css, then you should it like this
<link rel="stylesheet" type="text/css" href="CSS/style.css">
Try writing <link rel="stylesheet" type="text/css" href="CSS\styles.css">and check the spelling of your CSS file because they are different in question and in your code.
It`s easy. Take it
link rel='stylesheet' type='text/css' href='CSS/style.css'
and read W3School
Trying out the image blog application to understand floatprpertiy of CSS. As the link is accurate from Flickr Photo Website, the webpage is unable to render the images.
Tried to look up w3schools for syntax of img tag of HTML.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="photos.css">
<meta charset="utf-8">
</head>
<body>
<img src="https://flic.kr/p/qh8u7t">
<img src="https://flic.kr/p/nZybCW">
<img src="https://flic.kr/p/odUZLT">
<img src="https://flic.kr/p/pnzXJv">
<img src="https://flic.kr/p/qyz47B">
<img src="https://flic.kr/p/q2PmdR">
<img src="https://flic.kr/p/nM4vbe">
<img src="https://flic.kr/p/fvVSdn">
<img src="https://flic.kr/p/drtH69">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
even though both the image are showing when I try to save the code its showing an error.
Can anyone help me with it.
Thank you
The only error in your HTML I see, is the missing closing HTML-Tag. Perhaps your "Code Academy" environment is very "picky" and sensible to these kind of errors a classic browser would ignore.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
</html>
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.
I'm working on a website and my website has to work in Chrome and in Internet Explorer 9. I'm almost finished and I have only one problem left. If i want to load an image with "content: url()" it works perfectly in Chrome but not in IE9. Can somebody please give me another solution where I where i don't have to change my HTML.
My HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="test.css" />
</head>
<body>
<header>
</header>
<a id="photo">Photo</a>
<footer>
</footer>
</body>
</html>
My css:
#photo {
content: url('right-button.png');
}
Try this:
#photo {
background: url("right-button.png") no-repeat;
}
For more informations read here some articles i found for content attribute:
content property,W3c