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>
Related
I am changing the style of all image tags under a div but google image ads will also be there. Does this changes the style of google image ads?
CSS
.articles-container img
{
height: 400px;
width: 500px;
border-radius: 20px;
}
.articles-container img:hover
{
border: 4px grey solid;
background: grey;
}
HTML
<div class="articles-container">
<img src="">
<img src="">
<img src="">
/* want to put google image ads inside */
<img src="">
<img src="">
<img src="">
</div>
The css will change img tag style. Hover effect is also there. Will this make any change to google image ads style? Please help me out here. Thanks in advance ...
Google ads use a different tag to embed the code which should not be affected by this but if there is any img tag present inside , it might get affected. It depends on how you write your CSS.
I am new to all of this and wanted to know how to enlarge my image when I hover over it.
So far I have tried this.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John's" />
<span>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" />
<br />St John's, Baldock
</span>
</li>
All this does is makes a small image and a large image. I don't know how to use css so if you respond please can it be in HTML code.
Also the HTML code that is coming up in the text box beneath is not what I have written and don't know how to change that.
Thanks for any help in advance.
Sarah
You should really look into CSS or Javascript as otherwise hovering is a near-impossible task. Heres what you can do:
First off, remove the span and use a class to identify the thumbnail.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="thumbnail" />
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" class="large-image" />
<br />St John’s, Baldock
</li>
</ul>
Now add some CSS, don't worry, it's rather simple. What we want to accomplish is that when you hover over the thumbnail, we display the larger image. So on hover, we hide the thumbnail and show the larger image. But since we're hiding the thumbnail, we can't hover on it, so we also want to keep displaying the larger image until our cursor moves away from it entirely.
<style type="text/css">
.enlarge .thumbnail + img {
display: none;
}
/* Hovering over the thumbnail, hide the thumbnail */
.enlarge .thumbnail:hover {
display: none;
}
/* Hovering over the thumbnail, show the large image and keep showing it when hovering over the image */
.enlarge .thumbnail:hover + img,
.enlarge .thumbnail + img:hover {
display: block;
}
</style>
The .enlarge select all elements with class="enlarge", the .thumbnail does the same for the class thumbnail. img selects every image element, and the + in the middle says to select any element that comes directly after the preceding, so the line simply reads: select any img element that comes after a .thumbnail element that is inside a .enlarge element. The :hover seems self-explanatory, but here goes anyway: a : selector is called a pseudo-selector and defines a state or meta element (meta elements are elements you can stylise but aren't really there, like ::before and ::after). Metas usually use a ::. There are other pseudo-states as well, like :active. The style that is defined here will only be invoked when that state is invoked. Its the easiest way to make a hover happen!
You can, however, do this with just one image as well:
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
It simplifies your styling a lot:
<style type="text/css">
.enlarge-image {
width: 150px;
height: auto;
}
/* Show full size on hover */
.enlarge-image:hover {
/* This can be any size you want it to be as well. */
width: auto;
}
</style>
A couple of notes on your code: first off, be aware you have typographic quotes (” compared to regular quotes: ") surrounding your image source. This can lead to issues. Second, an image size is always in pixels unless defined in %, so ommit px from your width and height.
.enlarge-image {
width: 50px;
height: auto;
}
.enlarge-image:hover {
width: auto;
}
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150" height="100" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
You should start learning css. It is the only way to fix it.
<head>
<style type="text/css">
.picture{
width : 150px;
height : 100px;
}
.picture:hover{
width : 200px;
height : 150px;
}
</style>
</head>
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" class="picture" alt="St John’s " />
</li>
</ul>
Figured it out, but now it looks rubbish. Anyone know how to hide the other photos when I hover and enlarge one photo as they just move around the larger photo.
That's what I have. I still cant post a photo of what it looks like. Also the last photo when you hover over it it flickers, is this my code or the size of the screen?
Above answer are correct. I am providing you some link which will help you.
http://cssdemos.tupence.co.uk/image-popup.htm
http://jsfiddle.net/4AM3S/
I have the code below to display the image and the code as a hyperlink. But I would like the image placed behind the text and person can click on either
<h1>test</h1> <img scr="#"/>
Use CSS to achieve this:
test
Here you can see more info about background-image: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
You have syntax error in your code, you must use <h1> outside the <a> tags, like this:
<h1> test </h1>
You can also use position: absolute so the text will be on the top of the image.
HTML
<a href="#">
<h1>test</h1>
<img src="http://spi3uk.itvnet.lv/upload2/articles/54/542197/images/Jauka-vasara-8.jpg"/>
</a>
CSS
a {
position: relative;
}
a h1 {
position: absolute;
z-index: 100;
color: #FFF;
}
Demo Fiddle
I recommend you to use background:
<h1>test</h1>
But if you want, you can use another variant (negative margin):
<h1 style="height: 24px;">test</h1><img style="margin-top: -24px;" src="..."/>
Or absolute position:
<h1 style="position: absolute; z-index: 9;">test</h1><img src="..."/>
P.S. You have some typos in code: scr -> src and <\h1> -> </h1>
Well, it depends how you'd be using this.
Either set is as a background image instead of adding an img-tag.
But that would mean you'd have to set the height. Otherwise your image would crop.
...or you can set the (wouldn't use h1 in this case for semantic reasons) span with the text to:
CSS
span {
display: block;
position: absolute;
}
and then position it wherever you want inside the image.
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
See js fiddle here http://jsfiddle.net/Ws8ux/
Is it possible to keep the text under logo without hiding it using display:none or text-indent? I want to bring the image up and keep logo behind it. Like is PSD layers. And Don't want to use Logo Image as a CSS background
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" />Logo Text
</a>
Like this (fiddle)?
HTML:
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" /><span>Logo Text</span>
</a>
CSS:
a { display: block; position: relative; }
a span {
display: block;
position: absolute;
top: 40%;
}
What's the purpose of keeping the text if it's to be hidden? If your goal is to hide the text underneath the image for the purposes of accessibility, you may be interested to know that most search engines won't fault you if you just leave the text as an alt attribute on your image. In contrast, you might find some techniques for deliberately hiding content could prove detrimental to your cause.
If it's important to have both the image and text present, you may want to try wrapping the text in a <span>, using an accessible style on that and then disabling it in your print stylesheet.
#jitendra; may be you have to play with css:
CSS:
a { position:relative; }
img { position:absolute; top:0; left:0 }
HTML:
<a href="/" title="Return to the homepage" id="logo">
Logo Text<img src="http://lorempixum.com/100/100" alt="Nike logo" />
</a>
check the fiddle may that's help your http://jsfiddle.net/sandeep/Ws8ux/11/
You can do this by setting position: absolute for the image. You should probably also make sure the anchor is the same size as the image, so that it doesn't break the layout of other elements on the page.
img {
position: absolute;
}
a {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
}
The updated fiddle: http://jsfiddle.net/Ws8ux/7/