Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Make a background image bigger than the browser window

Posted on 2014-03-19
1
Medium Priority
?
452 Views
Last Modified: 2014-04-07
Hi,

I have a background image teh fills the entire browser window. I have set it to "cover" - so that it stretches to fill the window

I want to create a parrallax effect whereby it moves with mouse movement, So to do this i think i need to make the background image larger than the browser window, so that it has room to move left and right

How can i achieve this?
0
Comment
Question by:coolispaul
1 Comment
 
LVL 12

Accepted Solution

by:
Tej Pratap Shukla ~Dexter earned 1500 total points
ID: 39939239
Hey coolispaul
You can achieve this by altering background image height and width , but overall the background image would look pixelarated .I have a solution that you could achieve somewhat "parallax" effect :
just modify the css by creating an id
#example{
  background-image:url(abcd.jpg);
      background-attachment:fixed;
background-size:cover;
}
you can call this id from body , eg : <body id="example">
Feel free to revert back for further query

Thanks
~Dex
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question