How to create this image effect for my home page
-
How do I make a wide, somewhat fast loading image effect like this home page has:
work on my website
I'm asking for how to create the effect (with small enough image kb to load) and what the image should be of in your opinion.
Thanks!
-
Hi Bob,
This effect is done using a background image.
The image being used is this one:
http://www.3dcart.com/images/5/main-panorama3.jpg
It has a width of 2500 and height of 444. This ensures that it takes up the whole screen on devices less than 2500px wide (which is most of them). The image has feathering on the left and right - which allows it to fade to the same as the black background on devices largest than 2500px.
The site specifies the image, width and background colour in their CSS file:
.panel0 {
height: 444px;
background: #18100d url(../images/5/main-panorama3.jpg) no-repeat center top;
}and to display the background image - they use HTML similar to this:
[SOME STUFF]
I hope that helps.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Should I create a microsite or will 301 be sufficient?
We have a client http://www.shedfinders.com/, new site and we are slowly building DA & PA for. However they have another domain industrialpropertyscotland (one of the keywords they want to rank for) Should we create a little microsite attached to the main site - Say "Your guide to buying industrial property in Scotland" or should we just stick to a 301 redirect and keep working on the main Shedfinders site? Thanks, Laura
Web Design | | lauratagdigital0 -
How can we improve our e-commerce site architecture to help best preserve Page Authority?
Today I installed the SEOMoz toolbar for Firefox (very cool, highly recommended). I was comparing our site http://www.ccisolutions.com to this competitor: http://www.uniquesquared.com For the most part, the deeper I go in our site the more the page authority drops. We have a few exceptions where the page authority of a subcategory page is actually better than the cat. page one level up. In comparison, when I was looking at http://www.uniquesquared.com I noticed that their page authority stays at "21" on every single category page I visit. Are you seeing what I'm seeing? Is this potentially a problem with the tool bar or, is there something significantly different about their site architecture that allows them to maintain that PA across all category and sub category pages? Is there something fundamentally wrong with our (http://www.ccisolutions.com) site architecture? I understand that we have longer URLs, but this is an old store with a lot of SKUs, so we have decided not to remove the /category/ and /product/ from the URLs because the 301 redirects that would result wouldn't pass all of the authority they've built up over the years. Interested to know viewpoints on the site architecture and how it might be improved. Thanks!
Web Design | | danatanseo0 -
Duplicate Page Content mysite.com and mysite.com/index.html MOZ Dashboard
According to MOZ Dashboard my site shows Duplicate Page Content mysite.com and mysite.com/index.html .What i can do for that .redirect mysite.com/index.html to mysite.com .then how can i do that using .htaccess file .
Web Design | | innofidelity0 -
Spammy page titles and the consequences
Hiya Mozzers! A pal who works in SEO has suggested I add the following type <title>tag structure to my pages:<br /><br />Bars in New York - Bars New York [no brand name]</p> <p>Pizzas in New York - Pizzas New York [no brand name]</p> <p>Firstly, I think this looks spammy, secondly, can't understand the logic of both combinations, thirdly, my understanding is brand name lessens importance of keyphrases, but it's still important from a branding point of view.</p> <p>Fourthly, is this sustainable? I mean, Google could identify this as spammy in the future, with penalty, no? Any feedback on these points would be very useful.</p> <p>Also, he said that I should play around with title tags on an ongoing basis, but I haven't changed any single title tag more than once/6 months for fear of being flagged for manipulative SEO practice by Google. Guidance here would be great as well.</p> <p>Thanking you in advance, Luke</p></title>
Web Design | | McTaggart0 -
Keyword rich footer links negative effect
Based on bits and pieces of information I've read on SEOmoz, am I correct to state that:
Web Design | | Partouter
"Keyword-rich footer links effect pages negatively in terms of the keyword referenced in the anchor text?" This means footer links in Thanks in advance fellow Mozzers!0 -
Is it necessary to redirect every Error page (404 or 500) found?
If I have Hundreds of pages with 404 and 500 erros should set up 301 redirects for all of them? Some of the pages have external links, some don't.
Web Design | | jmansd0 -
Image Maps vs. Normal Images
Hey Mozzer's, quick question: Does anyone out there have any opinions / research on whether the use of image maps is an effective way of linking to other pages on a site as opposed to using seperate images? Does Google read alternate text from an image map in the same way as a regular image?
Web Design | | MarkLoud0 -
What's the best SEO option for jQuery image carousels?
My client wants a fancy jquery carousel at the top of their home page, as is all the rage these days. I would like to add some nice SEO friendly text to that carousel, but I'm not sure how best to do that..I assume that by keeping the text which will appear in the carousel in divs on the page, which will be swapped out as the images cycle, it should still be easily picked up by search engines?
Web Design | | TroyCarlson1