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
-
Affects of a Home Link 301 Permanent Redirect in the Main Nav Bar
Hi I created a home page link in the main nav bar using functions.php request, and this leads to the home page, and it works fine. The logo on the site when clicked, resolves the home page domain.com which is fine. Is it ok to have a home page link in my main nav bar, as well as a clickable logo which on-click returns the web user to the home page also? (any seo implications with the permanent 301 redirects?) I like to give web users the choice especially as not all users are aware that they can click back to the home page by clicking on the logo. I considered breadcrumbs already. Thanks.
Web Design | | SEOguy10 -
Creating a forum
We're looking into creating a forum for our visitors. I've identified that our target market is very active on online forums, and that this is the best way of encouraging user participation amongst our audience (I know forums as such are a bit old-fashioned, but so is our audience!) I have never set a forum up before... I was wondering if there was anything your collective brains could come up with in terms of a 'wish list' the forum should have... For example, I want to limit spam (LOL, I know, losing battle) - what measures would you put in place to do this? I was thinking that users would have to create a login to participate, and that they would only be allowed to post links after a certain number of posts - is there anything else I've missed? We will be looking to promote the forum via email marketing to our customers, and will set up logins for them each, and invite them to join individually. There are about 10,000 people we could invite in this way (list is growing every day, so it could very well be a lot more by the time we launch!) What else would you suggest? I was thinking of display advertising (maybe via adwords remarketing), and obviously we'll be looking to list organically (but I don't think this can happen instantly, I kind of feel it's a chicken/egg thing - we need the participation before we get ranked, but to get participation we probably need to be ranked!) I was also wondering if we should set it up on a subdomain or not? I'm in two minds about which is best for us! Anyway, any input from you would be enormously beneficial. Thank you!
Web Design | | CommT0 -
Does an age verification home page hurt SEO?
There's a microbrewery in our area that just launched its first website. It has the "verify your age" homepage (which is not really their homepage, but I don't know what it's called) before you can enter. It looks like this: http://angrychairbrewing.com/ Anyway, does this hurt them at all from a rankings standpoint? Also, assuming bots/spiders/ROGER can crawl sites like this, (which I think they would have to be able to do) how do they get around this verification? Thanks, Ruben
Web Design | | KempRugeLawGroup0 -
301 Redirect ! Joomla Pages, Already ranking. ( just wanted to change the url
hey guys hope everyone had a new year. I am ranking for a page on my site that i want to ( not specifically move ), but just change the url name: It is too long i think and i want to move it from one portion of my architecture to another menu. I have never physically done a 301 redirect myself, always had someone do it for me. I wanted some pointers. Since it is a fairly new site 4 months old! What are my options. Do i need to 301 redirect the page, if i am changing the Structure and AI of my site, or can i just change the url as is and it will still get ranked? How do i keep that url put delete the page and redirect it ? Sorry its very simple but i wanted to get the communities help to continue on ! Best Wishes HAmpig
Web Design | | BizDetox0 -
Adding breadcrumbs in the body of a page
We want to implement breadcrumbs to improve the usability of our website - if we manually input breadcrumbs into the body of every page via our CMS are there any negative effects?
Web Design | | braunna0 -
My personal search page
www.myname.com I watched the "White Board Friday" video on creating your own website based on your name. Can anyone explain why this would be a good concept for me? I'm currently involved in 1. Marketing for the company I work for 2. Sales for the company I work for 3. Affiliate Marketing/ Site Creation as side projects 4. SEO as a free-lance part-time offering 5. PPC & Web-marketing as a free-lance part-time offering Would my personal page be to showcase all of this? why is it beneficial for SEO?
Web Design | | AndySolo0 -
Link Pages/Directory
Hello, What is best practise for dealing with alot of links. I was thinking of breaking them download to alphabet pages i.e. all A on one page etc... BUT should I then make the links clickable on this list OR that they load to a sub company page which has a clickable link to there website.
Web Design | | JohnW-UK0 -
Infinite Page Scrolling for e-commerce Product Catetegories
Hi There, I would like to know what's the pros and cons of Infinite Page Scrolling for e-commerce Product Categories that have over 700 products. Sample here Secondly how will this effect our on page SEO as far as google concerned? Many Thanks
Web Design | | Jvalops0