I was looking at the source code for this website and I'm stumped as to how the background image on the header is implemented. Using Chrome's inspection tools, I can find nothing inside the ``banner-area` div, and no image styles on the div of any sort. How do they do it?
Edit: As #makadlcik pointed out, it is the page-header div that has the background. But then how did they create the banner-area div that appears to be inside the image? I realize that it is impossible for HTML to be inside an image but Chrome's devtools make it appear as such.
It is the background-image property of page-header-wrapper div.
link of the background image: http://static.squarespace.com/static/51c50433e4b05645eb845ef5/t/51e592d9e4b047a5486b868d/1373999833147/Web%207.jpg
You probably meant that you cannot put an html tag inside an <img> element, because it is a single tag, but that is not this situation. They created a div as a parent with background image. A div is a pair tag, so it can contain a child.
Related
I needed to turn my image into a hyperlink, so I wrapped the tag around it. For some reason, only the bottom part of the image is clickable for the hyperlink. The rest of the image won't do anything.
This is my code:
<img src="image-here">
change width or height may be that is the problem
I have a question, in this picture, I applied the background-color property to the html and body tags, but whats the difference in applying it to each one individually? Also, when I use the cursor tool to view the page's box model, I can see that both, the html and body tags end with the div element, but the background-color:green covers the entire viewport. Do you know why?
image
In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.
I'm currently tweaking the stylesheet of an online conference website so it looks better. I will be using Chrome's "Inspect Element" feature combined with the "Stylish" plugin to create & save the new stylesheet and then have Chrome replace the preexisting stylesheet with my edited version, client-side (i.e. the function of the plugin). The one area I'm having difficulty with is replacing the image banner, as it's an image in the HTML of the page instead of on the stylesheet (see screenshot):
http://i.imgur.com/JRrYkvd.jpg
I am able to set a background image in the "bannerimgcell" class, but the http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif image remains on top of it. Is there any way to position a background image for this class on top of the image, so that it looks like a new image banner is there?
EDIT: Sorry if I'm not being clear. I'm trying to put a new header image over the preexisting one via CSS.
JavaScript Solution:
You can change the image source:
var newImg = "http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif"
document.getElementsByClassName('bannerimgcell')[0].setAttribute('src', newImg);
As the render layers are composed your CSS background will be below the img src.
Not really sure if this code will work. I am assuming that 'bannerimgcell' is the class of the img tag and its the first one.
CSS Solution:
.bannerimgcell:after {
background-image: url('someNewImg.gif');
/* width, height and position to match the overlaid element */
}
I think what you may be looking for is using:
position: absolute;
z-index: 2;
background-image: url('yourimage.jpg');
That would place whatever element is styled by those rules, up and above anything below it, provided that the element beneath it has a lower z-index (by default it would).
position:absolute means that you'll have to manually place the new CSS element over the existing content, and make sure that all the widths and heights align so that you don't see the old image below.
I am trying to create one advert that use both empty sides of the website content. So i add the advert image as a background on BODY tag. look nice. But the problem is to add a link to it. I start with onclick att on body, but them all site content become clickable. Also i try to use different z-index for body and the content div. Don;t work as well.
This the website i take the idea from. I just want to do some thing similar.
http://www.sport.co.uk/
Any help are welcome.
I would forget about the body background and use 3 div columns.
Other possibility would be to use absolute positioning in css and for new browsers you can make the div to stay on its position and not to scroll.
I was wondering what is the best practice regarding divs with backgrounds and img tags. I understand that divs with backgrounds can have stuff on top of them and what not, but if its the case with just have an image, which is the preferred method? Maybe a better question is.. are img tags obsolete? When you have an image thats a link should you use an img tag or a div?
Thanks!
Matt Mueller
Div backgrounds should be just that: background images for style. img tags should be for when you're displaying an actual image as an image itself, say you are showing a picture of something. you should use an image tag and not a div bg
Think about it as semantic markup:
If it is an "image" on the page, as far as the meaning of the page, use the img tag.
If it something that is not that significant to the page's meaning, ie. background image, use a background image on any sort of element (not just a div).
This difference really doesn't matter to how the page displays in most browsers, but has a different meaning to those who aren't interpreting the images visually.
Try to imagine how the elements will be interpreted by visually impaired.
There also may be a slightly different behavior by search engines-- I don't know whether search engines will pick up background images for their image search. If you really want the image out there, an img tag is safer.
is the image for layout or content?
if the image is layout related i would use CSS and have it in a div ...if its content related i would have it in an img ...
Hope that helps!
A good way to look at this is to view your site with stylesheets turned off. You'll quickly find out that all the DIV tags with background images do not appear. All of your IMG tag images are right where they should be. I would use DIV tags with background images for all aspects of site design and layout and use IMG tags for everything else.
IMG tags have alt properties and title properties. These are used in place of the image when it doesn't load or in place of the image in text only or screen reader type browsers.
IMG tag is not obsolete. You use it with dynamic images, that come and go from your system.
Background images on divs are useful when you have a static set of images that are part of your design. Sometimes you can merge them into one big image to minimize load time and the number of HTTP requests pro page.