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
-
404 errors & old unused pages
I am using shopify and I need to delete some old pages which are coming up as 404 errors (product no longer available!) does anyone know where you go to delete these pages which are no longer needed?
Web Design | | carleyb0 -
WordPress Category page title h1 or h2
Hi friends, I know this is a minor technical change, but we are in an extremely competitive market and I don't want to have any points against us. On our WordPress Category pages i.e. http://www.domain.com/category/�tegory-title%/ I looked at the code behind the the Title of the category page, which is "Browsing: %Category Title%" The code is an h2. I look at the posts in the category archive below, and those are also h2's. The theme preview is here and you can click on Entertainment - Reviews to see exactly what I'm referring to - http://themeforest.net/item/smartmag-responsive-retina-wordpress-magazine/full_screen_preview/6652608 I changed the code for the "Browsing: %Category Title%" to h1, which I believe is more consistent and standard formatting. 1. Is this a correct technical on-page optimization? 2. Would it be beneficial to remove "Browsing"?
Web Design | | JustinMurray0 -
Spaces at beginning of title tag - negatively affect the optimization of the page?
For some reason, our title tags have a long space after the beginning title tag and before the text appears. The beginning title tag is on one line, then a break, a tab and then the content of the title tag. I'm pretty sure this is not good and is affecting optimization of the page. Am I correct or is this not an issue and does not need to be fixed? Example: | <title></span></p> <p> </p> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> First keyword</td> </tr> </tbody> </table></title> |
Web Design | | CFSSEO0 -
Changing Page Extenstions
Hi all, I have a 10 year old website done in Classic ASP, which is fast becoming outdated and we are going to convert it to PHP so all of our pages would be changed from a '/page.asp' extension to a '/page.php' extension. I am familiar with the need to setup 301 redirects for this and I understand there will probably be a short term drop in our Google rankings. Naturally, I don't want to have to go through this again in the future so here is my question. Is having NO page extension, like '/aboutus/history' the wave of the future? Does having no page extension effect SEO at all? I have seen more websites using this technique in 2013 goes on so I am thinking this is the way we should plan our site update. I haven't looked into how to actually do this yet, but it would seem to make sense to me so that if we needed to change from PHP to say .NET or something else later on, we would not have to do 301 redirects again or have another drop in our rankings. Do any of you have an opinion or experience with this?
Web Design | | jacksghost0 -
How do we get search engine bots to the item detail pages?
The problem we have is that we have lots of inventory pages. These inventory pages have a bunch of links at the top linking to different styles of the item, up to 56 links in some cases. Then each item listed has a link to the item's detail page and a link to the item's shop owner's page. So if a page has 50 items shown, there are really 100 links just for the inventory. This is not taking into account the header links, footer links, sidebar links to other sections on the site. We have all these links to help consumers move through the site. The problem is that every item detail page on the site is not getting indexed and actually I think it's more like over 50% of the item detail pages are not indexed because the search engines are too busy following all these other links. Should we nofollow, index the links to the different styles of the item, the shop owner page? Or what should we do to get the search engine bots to index our item detail pages?
Web Design | | CFSSEO0 -
Text in Images vs. Alt tags
Hi on my homepage i h ave multiple images They have the appropriate alt text for each image, but the text which the image displays is not written into the page and styled using CSS rather than placing text within an image. Is this a issue worth correcting, or is it sufficient to have just alt text for each image. Any major pros from having putting the text in the image into the CMS using appropriate CSS styling to achieve the same effect.
Web Design | | monster990 -
Flash Effect on SEO Results
I suppose this is an open-ended question, at least for now, because I'm getting differing opinions on whether Flash inhibits optimum SEO results. I don't know the answer but I've just started to do some research and it seems this would be a good discussion based on your experience. I look forward to your thoughts. Thank you.
Web Design | | karlseidel0 -
Landing pages vs internal pages.
Hey everyone I have run into a problem and would greatly appreciate anyone that could weigh in on it. I have a web client that went to an outside vendor for marketing. The client asked me to help them target some keywords and since I am new to the SEO world I have proceeded by researching the best keywords for the client. I found 6 that see excellent monthly searches. I then registered the .com and or .net domain names that match these words. I then started building landing pages that make reference to the keyword and then have links to his site to get more info. My customer sent the first of these sites to the marketer and he says I am doing things all wrong. He says rather then having landing pages like this I should just point the domain names at internal pages to the website. He also says that I should not have different looks for the landing pages from the main site and that I should have the full site menu on each landing page. I wanted to here what everyone here has to say about the pros and cons of the way to do this cause the guy giving the advice to me has a lower ranking site then I do and I have only started working on getting my site ranked this year. He has atleast according to him been doing this forever. Thanks, Ron
Web Design | | bsofttech0