I have a very simple page (perhaps too simple) I just have a title and a text. I want to apply the new html5 semantic elements. The first problem is with the title. For design reasons I want it to be an img and I use a img background. So I do not use an h1. This does not create the correct outline of the page. How do I do this page with correct semantic html5?
You can use this: http://jsfiddle.net/Narcis/ktF96/
CSS:
#title{
position:relative;
margin:0 auto;
background-image:url('img.png');
}
HTML:
<div id="title"></div>
<div id="text">
<p>text, text,</p>
</div>
To use a background image as your H1, use text-indent to hide the H1 text from sighted users (but not from screen-reader users or search engines) and specify the path to the background image and its height.
For example, your HTML would be something like this:
<h1>Art of the Title</h1>
And the CSS:
h1 {
text-indent: -999em; // that's the most you can left indent something
background: url('/PATH/TO/YOUR/IMG.png'); // your background image
height: 300px; // the height of your background image
}
Demo
Related
in the picture is my code and what shall I add to make "Lanlan's Dinner" show on the background1.jpg? This code is what the textbook saying about how to add a background img under your title. But in this code, only the picture shows, the title does not show.
Thank you
You could so something like this. Place the heading inside a div and set the background of the div to an image as suggested. Then set the position of the heading to relative and have the ability to adjust the text placement on the image.
I think this is what you wanted? No js is really needed for this.
.header {
background: url(http://via.placeholder.com/200x50) no-repeat;
font-size: 14px;
width: 200px;
height: 50px;
}
.header h1 {
position: relative;
top: 20px;
left: 2px;
}
<div class="header">
<h1>
Hello, world
</h1>
</div>
To have an image as a background, use the background-image CSS property (or the background property). Note the associated background-* properties, many of them are useful to arrange the image (e.g, I'm using background-repeat below so it won't tile the element).
h1 {
background: url(http://via.placeholder.com/200x50) no-repeat;
}
<h1>
Hello, world
</h1>
What if we use the follow code?
<figure>
<img
src="http://via.placeholder.com/200x50"
alt="An awesome picture">
<figcaption>Text below the image.</figcaption>
</figure>
<figcaption> is recommended for these types of situations, so you should make a use of it.
Edit; since the question was, how to add background image above title, here's how you do it:
<figure>
<figcaption>Text above the image.</figcaption>
<img
src="http://via.placeholder.com/200x50"
alt="An awesome picture">
</figure>
If you want show title on the picture in html, you must do something:<img src="images/background1.jpg" alt="Lanlan's Dinner" title="Lanlan's Dinner" width="700" height="700" />.
The ALT attribute is used to display the value when the image is not displayed.
Best,
thanhnt
What you put in the alt attribute is an alternative text. It is shown if the image is not loaded (not yet or not at all). It is also used by search engines to "understand" what is in the image.
If you want to display text on your page, you have to put that text inside your h1 markup:
<h1><img src="image.jpg">your title</h1>
and then apply some styles to display that as you want:
h1{
position:relative;
}
h1 .title{
position: absolute;
/*set that values to position your title, you can also use right and bottom, regarding on how you want to place your title */
left: 0;
top:0;
}
<br/>
<br/>
<br/>
<h1>
<img src="https://via.placeholder.com/200x50"/>
<span class="title">your title</span>
</h1>
I use bootstrap 3. I try to use "icon link" by using tag <a> as shown below:
HTML:
CSS:
.link {
background-image: url(img/icon.png);
}
It is important to say, that my stylesheet is in "main folder", that is in folder, where is a img folder with icon.png file. So it seems wrong url is not the case.
I can't figure out why image is not showing.
The anchor element has no content, and it has no styles that would affect it's dimensions, consequently it has an effective area of zero square pixels.
The background image is probably being applied just fine, you can't see it because there is no area on which it can be displayed.
The code implies that the image is there to tell the visitor where the link goes, that would mean that the image is content and not background and should be expressed as an image element (which would take on the dimensions of the image file automatically).
Using an image element also provides you with the opportunity to supply alt text for the benefit of screen readers / search engines / people with internet connections that briefly fell over while loading the image / etc.
<img src="img/icon.png" alt="top of page">
Because your is empty.
You need to give it a size :
.link {
background-image: url(img/icon.png);
height:100px;
width:100px;
display:block;
}
You have to make the tag enought big to show the image
Example:
CSS:
.link {
background-image: url(img/icon.png);
display: block;
width: 100px;
height: 100px;
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
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>
How do I convert and img tag to css so I don't have to have a million img tags. Or whats the best way todo images with css
<img src="hg-rx.gif" name="foo" width="18" height="18">
I tried background:url in css and it needs text for it to display properly, id hilight and the image would disappear
.hg-text-rx {
background:url(hg-rx.gif);
background-repeat: no-repeat;
position: relative;
}
You can do this with just css by using a div or other block element of fixed width and height and make the image the background of that. But to do this, you must still put the div (for the image) in the HTML so you aren't really cleaning anything up, unless you are just trying to make the site easier to skin completely using CSS. However, this does make rollover states a breeze.
div#hg-rx {
display:block;
width:18px;
height:18px;
background: url(hg-rx.gif) 0 0 no-repeat transparent;
}
<div id="hg-rx"></div>
If you are doing borders, rounded corners or buttons you might want to look into sprites.
http://css-tricks.com/css-sprites/
you can add a image as background in css, but you must set the width and height of image to be visible.
css
.hg-text-rx {background:url("http://dummyimage.com/200x200/000/545");width:200px;height:200px};
Demo: http://jsfiddle.net/2XX8A/
Actually, while this cannot be done strictly in CSS, if you have IMG tags and want to convert them to divs, you can do so using jQuery (a javascript wrapper) on the fly pretty easily.
LIVE DEMO http://jsfiddle.net/Epgvc/4/
HTML
<img src='http://dummyimage.com/200x200/000/fff&text=image1' />
<img src='http://dummyimage.com/100x100/f00/ff0&text=image2' />
<img src='http://dummyimage.com/250x50/0ff/fff&text=image3' />
JS
$('img').each(function(){
var html="<div style='border:1px solid #ff0;width:" + $(this).width() + "px;height:" + $(this).height() + "px;background:url(" + $(this).attr('src')+ ");color:#fff;'>This is a Div!</div>"
$(html).insertBefore($(this));
$(this).remove(); //Comment out this line if you want to leave the original image
});
If you intent on having the image as a background to a text field you could alway use text-indent
.hg-text-rx {
background:url(hg-rx.gif);
background-repeat: no-repeat;
position: relative;
**text-indent:-10000px;**
}
<p>this text wont show, but the image will</p>
However there is conflicting arguments about this technique from a seo point of view