I have a static website and I need to create a background slider with a fixed height of 587px. The width of each image is 2000px wide, but the user only needs to see the image to the width of his or her screen beyond 1000px, the width of the website. The image does not ever need to move, stretch, or respond in any way.
It needs to look and function like, www.adsphoenix.com/2013design/index5.php, but be a background slider. If you select "view background image" (Firefox), you will see the image is wider than most screens. It is aligned to the center and top.
The problem I have is finding a slider to allow the image to go outside of the 1000px website. For example, www.adsphoenix.com/2013design/. All of these images are 587 x 2000px.
Something similar to this would be, www.chattanoogafun.com. However, this slider stretches.
Do you know of a pre-built slider that would work? Or a slider I could change the alignment of? Or something I could do to my code to allow it to work? I have hosting with Blue Host.
You can add the image as background image of a slider div with CSS and use this code:
.slider_div { //or another selector
background: url(../path/to/image) center center no-repeat;
}
If you want to slide your background, you'll need inline CSS to set the background of the slider divs (or use jQuery for that).
Related
I have an image of a computer screen in my landing page and I want the screen to show different images as slides. Is there any way to do this using bxslider or any other method?
you could have your image as a background on .bx-wrapper and use padding and the correct height and width to make the slider fit correctly
I'm wondering if it's possible to create a static lighting effect overlay using HTML/CSS.
What I have is a pure HTML5/JS app that consists on most pages of a top navigation bar and a series of cards in the body that are transitioned through using swipe gestures. These are all gray over a black background.
What I'd like to accomplish is have a sort of spot light gradient in the center of the screen that only effects the divs on the page and not the black background. This spotlight would be fixed so that when swiping through cards, it remains in the center of the screen.
I know I could overlay a div with a spotlight image as its background, but obviously that would mess up clicking/swiping on the page. And it would effect the black background.
Anyone have experience doing something like this?
A simple CSS solution (no events required)
Create a full-page-width bg image with the spotlight gradient.
Give each div this bg image, with a background-attachment value of fixed.
No matter where each div happens to be on the page at the time, it will act as a window through which you can see part of the spotlight gradient. In effect, the bg image stays fixed in place while the div moves over it.
Fiddle demo, and the same demo with heavily-rounded corners.
Alternately, it might be possible to give each div the same radial gradient in CSS (also fixed), rather than creating a static image file.
Try to use an absolute positioned div with a gradient. For passing through that div events use css property pointer-events (not supported by IE) or see that resource: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
Does Facebook in its gallery put image width and height in database?
Using JavaScript, they can not be sure about image width and height until image fully loads. But on FB, image is been loaded while its displaying and image is properly centered horizontally and vertically.
Facebook use display:inline-block for the image and text-align:center for parent div to center image in theater images.
Check out their blog post that explained how they did it. It's a nice CSS code but not all CSS. They use JS to set line-height of one of divs based on window.height.
Duplicate of:
Stretch and Scale CSS Background
How do I stretch a background image to cover the entire HTML element?
background image doesn’t stretch full page width
I've got a webpage background image, which needs to be displayed fully at 100% of the window's size. If the window is resized, the image needs to resize with it, to stay at 100%.
CSS does not allow you to set the sizes of the background image, only the way it repeats. (but I want it stretched)
I assume jQuery is the safest and quickest way of realizing this, to overcome browser-incompatibleness. Or can this be done quickly with regular javascript?
This link might interest you:
How Do you Stretch a Background Image in a Web Page
I've created a slideshow on a website (sorry, new user and can only post one link) using this method: http://iamacamera.org/sandbox/linkedphotoshuffler/ I only changed the specified variables, and it works great, except that about 10 or so pixels of the right edge of the image currently in the background are showing. I've checked, and the images are exactly the same size, so there appears to be a shift left of the foreground image or shift right of the image in the background. How do I ensure they are perfectly aligned or hide the background image so it is not visible to users?
Disable any CSS not necessary to make this work and see if maybe one of the CSS rules for your site is accidentally targeting the div holding the image and applying a margin or padding.