Solved

Make a background image bigger than the browser window

Posted on 2014-03-19
1
410 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 11

Accepted Solution

by:
Tej Pratap Shukla ~Dexter earned 500 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Dynamic Dropdowns 15 32
AJAX ModalPopupExtender will Not Hide in Asp.net 1 9
Responsive Font Size 6 29
send email part1 9 28
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

828 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