Martin Jernberg

[Solved] Centering the background on site

22 posts in this topic

Hi.

I've got a DIV that stretches 100% wide on a site, a wide banner at the top. I want to fill the background of this wrapper with the BT Background Slideshow - and that works perfectly! The problem is that my background-images is very wide, wider than the site, wider than many browser-windows, and i want to center the background-images in the div so that the middle is always in the middle, but the rest just overflows to the sides - so that people with larger displays / retinas can se more of it to the sides.

If the BT Background Slideshow used DIVS with background that wouldn't be a problem, just a matter of putting some CSS in and centering the background, but now it uses <IMG>, and i can't seem the get that to work. What am i missing?

I've attached an image explaining the design and my problem!

Greatful for any help!

post-167352-0-44647600-1356105370_thumb.

Share this post


Link to post
Share on other sites

Hi,

Thanks for your reply!

Here are the adress to the site in progress: http://www.martinjernberg.se/fascination/

Here are the CSS: http://www.martinjernberg.se/fascination/modules/mod_bt_backgroundslideshow/tmpl/css/style.css

The idea is that the coloured portion of the slideshow-images always should be centered on the site, even in smaller browser-windows.

I centered the "#slideimgs" by setting it to the fixed width of the slideshow-images and using left/right margins auto, but of course this only centers the slideshow if you have a wide enough screen (or out-zoomed), in smaller windows the images stick to the left of course when you scale down the window - i might be way off here, just trying some things. Is it even possible to do what i want then the slideshow-images are as <IMG> and not as a background?

Thankful for all help! - i love this exstension, if could only get it to work the way i want it to! ;)

Share this post


Link to post
Share on other sites

Hi again,

I've been fiddling around a bit but is yet to solve this problem. Excuse my poor CSS-skills, i must be missing something, since it doesnt seem like this should be difficult to achieve. Any help is greatly appreciated!

Share this post


Link to post
Share on other sites

Hi please try to set 2 parameters below:

Slideshow Size: Wrapper Elements

Resize Images: Auto

Then notice me and give me your admin account if it doesn't help you to solve the problem

Share this post


Link to post
Share on other sites

Hi!

Thank you so much for the great support! Really amazing! I'll be sure to make people know that.

It works perfectly now. However, i tried the site out in different browsers and in Internet Explorer 9 the first image loads, but the progressbar doesn't show and it doesn't slide to the next image, it stays on the first. Is this a known IE-problem with your extension or is there something else going on? I would love to ignore the 15% using IE but you know... any ideas?

A sidenote: This is probably to specific for you to bother, but your slideshow interferes with the JSN ImageShow image rotator at the bottom of the page – but only in Safari! – really strange. This is probably not your problem, just thought i should mention it.

Thanks a bunch guys!

Share this post


Link to post
Share on other sites

Thank you!

Now it works perfectly in IE as well. This kind of support is what keeps people coming back!

I'll be sure to give you a good review att Joomla.

Hopefully i won't have to bother you again :) (fingers crossed)

Share this post


Link to post
Share on other sites

Hi!

I have the same problem. Could you also send me a modul with these new parameters please?

Thank you very much.

Hi Tomi! I just sent to you the package via email! We will release new version soon!

Tomi likes this

Share this post


Link to post
Share on other sites

Hi Martin Jernberg,

Thank you for your review very much! Could you increase your vote to 5 stars? :rolleyes: :rolleyes:

Hehe, sure i would be happy to change to a five, though i think a four is even more worth since it feels more genuine somehow :)

Tomi likes this

Share this post


Link to post
Share on other sites

Hi!

Still doesnt work for me. Is any other way to solve this problem?

Tnx

Did you set value of "Horizontal align" and "Vertical align" to "Center"? Can you show me your link?

Share this post


Link to post
Share on other sites

So it is impossible to achieve a result that I want? The images on the all screens are the same size and positioned in the middle top. I want that the left and right edge of the image moves out of the screen on the smaller resolutions. I apologize for my poor English ;)

Share this post


Link to post
Share on other sites