Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Background image seems to repeat endless to the right


  #1  
Old Feb 26, 2014, 02:15 AM
EasyHiker
 
55 posts · Jul 2010
I've searched the forum about center and background styling topics, but to no avail (nothing for latest Atahualpa version anyway.)

My background image seems to stretch out to the right. (Please see attached images.) on my site allthingsriviera.com

I've added a background image (top left repeat) on a layout width of 1000, fluid 100% and layout max width at 1145.

What do I need to adjust to fix the post/page container in the center and avoid an eternally long (to the right) background? (On a mobile device, the post/page container is to the left and the background image continues to the right.)

I'm on updated WP and Atahualpa 3.7.13

Thanks for any help!

Last edited by EasyHiker; Feb 26, 2014 at 02:21 PM.
  #2  
Old Feb 26, 2014, 06:10 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
For some reason you have a scroll bar.
How big is the background image?
Instead of repeat perhaps you could use cover.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Feb 26, 2014, 06:10 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I'm not seeing the background when I view the site.

but your issue has to do with th ewidget area you have in the header and the 'position:absolute' - if you change it to 'relative' you will see it looks better on a mobile device.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Feb 26, 2014 at 06:21 AM.
  #4  
Old Feb 26, 2014, 07:43 AM
EasyHiker
 
55 posts · Jul 2010
Larry, if I put "cover" for the background image, the image disappears. The image is less than 1000px.

JD, the image is there alright. I'm not much worried about mobile devices at the moment, and when I changed "absolute" to "relative", it did nothing but disaligned my widget and the bottom scroll bar is still there.

  #5  
Old Feb 26, 2014, 10:57 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Go add this into your css and then see if you can determine what is happening

HTML Code:
div#quotes_area {
    border: 1px solid #FF0000;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Feb 26, 2014, 02:22 PM
EasyHiker
 
55 posts · Jul 2010
This is what happens, JD (see image attached). The scrolling bar still there, as you can see.
Attached Thumbnails
Click image for larger version

Name:	this is what happens.jpg
Views:	1219
Size:	45.0 KB
ID:	2507  
  #7  
Old Feb 26, 2014, 03:55 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
right, so what can you deduce? you have outlined the widget so you can see it. what do you see?
(I know what is wrong, now you have to work your way to the answer)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Feb 26, 2014, 11:45 PM
EasyHiker
 
55 posts · Jul 2010
You're the man, JD! Thanks.
  #9  
Old Feb 27, 2014, 02:47 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Do you want to explain the issue for others?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Feb 27, 2014 at 06:13 AM.
  #10  
Old Feb 27, 2014, 11:52 AM
EasyHiker
 
55 posts · Jul 2010
It seems the scroll bar came about because the widget container's width was not properly sized. When I created the widget for the header, I added the following CSS insert you (Juggledad) created:

#wrapper {position: relative;}
div#quotes_area {
border-spacing: 80px;
left: 900px;
position: absolute;
top: 90px;
width: 20%;
z-index: 99;
}

After tweaking it to the right size, the problem was solved.
  #11  
Old Feb 27, 2014, 06:27 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
When looking at it 20% certainly works but I don't think you need any width declaration. Is there some reason you put a width in?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Feb 28, 2014, 06:12 AM
EasyHiker
 
55 posts · Jul 2010
Larry,
Seems to work without putting the width as well. Just copied and pasted CSS inserts rom what JD recommended for when one creates widgets on header.
  #13  
Old Feb 28, 2014, 06:30 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Ahhh, see what blind copy/paste can do
Just to let you know, the 'width: 90%;' made that element 90% of it's parent element. The parent element got it's width from the logoarea table which eventually got it's width from teh wrapper which had a minimum width of 1000px. So the widget area had a width of 900px.

That by itself is fine, BUT when you pushed that area to the left by 900px, the widget area now extended to 1800px from the left side of the page hence the scroll bar poping up.

Moral of the story: If a horizontal scroll bar shows up, something extends past the edge of the page.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Body Background Image problem with y axis repeat gpeery Center area post/pages 2 Dec 7, 2012 03:54 AM
[SOLVED] Atahualpa 3.6.7 Post Titles repeat repeat repeat LGL Atahualpa 3 Wordpress theme 4 Sep 11, 2011 09:26 PM
Just updated today and now post headlines repeat and repeat. sjolyjuly New Versions, & Updating 19 Aug 15, 2011 12:12 PM
[SOLVED] my background image on repeat-x creates a scrollbar - how to get rid of it? mafgirl Atahualpa 3 Wordpress theme 2 Jul 27, 2011 07:52 AM
[SOLVED] Sidebar NO repeat background Ber|Art Sidebars & Widgets 1 Jun 21, 2010 03:00 AM


All times are GMT -6. The time now is 10:56 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.