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
-
How does lazy load effect SEO?
One of my clients implemented lazy load on part of the navigation and I am wondering what the effects will be. Specifically, the drop-down navigation does not load until you hover over it. That means when you look at the page source that drop down navigation is no longer there. I am wondering if that means the google bot no longer sees the links in the navigation drop down. I am looking into this because the dev department of this company is going to do what it wants to and they need proof that its a bad move. I already suspect that it is. Too early to tell what the effects will be and not sure if there is a built-in delay in the algorithm as to when it will impact rankings. Ultimately, I am wondering if my belief that if you can't see it in the page source then as far as that particular page goes it is not seen. That would be an important thing to verify as being true.
Web Design | | KentH0 -
Adding picture and new layout on jobs-overview page
Im running a castingsite today, where the jobs-overview page is the highest ranked on google on the important words. There is a big of reasons for that, it's updated daily, the domain is old and wellknown and so. Anyways, the today is this: (Yes it's ugly and old-school :))
Web Design | | KasperGJ
Current design:
http://www.onlinecasting.dk/auditions.asp I've created a new design, which is much nicer and with added pictures. The pictures in the new design, will be somewhat unique to the specific jobs, so the current ones are mostly for testing New design: (Not implemented)
http://www.onlinecasting.dk/auditionsnd.asp Question:
So my question is. Do you think this NEW design could affect my site / page in a bad way in SEO or?
I'm planning basically just to overwrite the old auditions.asp file with the new code. What do you guys think.0 -
Flickr Gallery Effect on Page Ranking
Hello there We are working on a redesign for our site, and our business is very image intensive (sign company) On a typical product page, we have 5 images we are placing directly in the site optimized to try to rank the images in image search We also have about 30-50 sets of images, with 3-5 images each - hosted on flickr, that we are displaying as galleries on the page (user clicks, opens a light box to view the set, etc) Here is the page - http://impactsigns.ugmade.com/sample-page/ If you look at the page code, you will see that the flickr gallery (additional examples) section - adds ALOT of code to the page (lines 498 to 837) My question is : Does adding that flick gallery block negatively impact the page SEO, all else being equal? It seems like a lot of lines of code. And dont want it to seem spammy to the search engines. Thanks for your help and advice
Web Design | | Jumman0 -
Dedicated landing pages vs responsive web design
I've been doing some research into web design and page layout as my company is considering a re-design. However, we have come to an argument around responsive webdesign vs SEO. The argument is around me (SEO specialist) arguing that I want dedicated pages for all my content as it's good for SEO since it focuses keywords and content properly, and it still adheres to good user journeys (providing it's done correctly), and my web designer arguing that mobile traffic is on the rise (which it is I know) so we should have more content under 1 URL and use responsive web design so that users can just scroll through content instead of having to keep be direct to different pages. What do I do... I can't find any blogs, questions, or whiteboards that really touches on this topic, so can anyone advise me on whether I should: Create dedicated landing pages for each bit of content which is good for SEO and taking users on a journey around my site OR All content that is relative to a landing page, put all under that one URL (e.g. "About us" may have info on the company, our team, our history, careers) and allow people to scroll down what could be a very long page on any device, but may effect SEO as I can't focus keywords/content under one URL properly, so it may effect rankings. Any advice SEO and user experience whizzes out there?
Web Design | | blackboxideas0 -
Page Content
What is the minimum amount of content a page should have to be seo friendly? What is the maximum amount of content a page should have to be seo friendly?
Web Design | | bronxpad0 -
Best layout pages for SEO
Dear all, what would be the ideal layout of a webpage for SEO? How would a homepage and landingspage look like? Thanks in advance! Best regards, Ben
Web Design | | HMK-NL0 -
Pages vs. Posts for SEO
Hi, I would like your thoughts about pages vs. posts for SEO. I understand the difference in terms of WP structure and have read the SEOmoz blog post about setting up your site for SEO success (http://www.seomoz.org/blog/setup-wordpress-for-seo-success). However, if you're trying to rank for a particular keyword, it seems that either one could work, from an on-page SEO perspective, as far as title tag, URL, meta description, etc. So how do you decide whether to set up a page vs. a post? What are the pros and cons, from an SEO perspective, about using one vs. the other? Thanks in advance! Carolina
Web Design | | csmm0 -
Solutions for too many links on page (Ecommerce)?
Hello Mozzers, Most Ecommerce websites I've come across have four main link sections - Main Nav - About, Contact etc Side Nav - List of Categories + Products Footer - Useful links etc Promotional Area - Promoting Best sellers / Latest products This ends up totalling anything from 200 to 500 links. I was wondering is there a reasonable solution to hide some of the links? Or should I just ignore the warning? Thanks, Dan
Web Design | | Sparkstone0