There's a link to my test page Link
The problem is when I try to resize to small devices, background image is not covering the page properly, image is missing on the bottom of the page.
My CSS in head section.
Thanks in advance for any suggestions what I did wrong.
Change this
html,body {
height: 135%;
}
to
html,body {
height: auto;
}
Don't use fix height, use auto.
Related
Scenario :
I have a Wordpress site which has an old theme and doesn't allow me to change the header image.
As a workaround on a page where I want a different image, I have
hidden the header image using CSS and replaced it with a background
image, which works fine and is responsive.
Todo :
However I needed to set a height for the area in order to make a space for the bg image to show up at full size (which I have done using a "padding-top")
which causes a large space underneath the background image whenever
the window is resized down, or on phones.
Is there a way to make the
space underneath the image collapse down as the image also collapses
down?
URL: http://www.annareynolds.org/lovehobart/
My Custom CSS:
.singular-page-691 #header img {
display:none;
}
.singular-page-691 #branding {
padding-top:390px;
background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position:top left;
}
only use padding in %
like:
.singular-page-691 #branding {
padding-top: 40%;}
http://prntscr.com/kj6z3j
I have visited the link you have provided and checked the responsive. I assume that I worked on the right place as your question asked.
You have paddding-top:390px in .singular-page-691 #branding It cause the space you mentioned. You can adjust the value of padding-top in responsive. I tried with padding-top:180px and it seems fine for me.
I have been struggling with this WordPress Theme: TOTAL for days.
I think I found section that works for me, Call To Action Section.
I added Background Image and button, but the problem is that it is not taking up the center of my HOME page.
The image dimensions are 1280px X 720px
It appears as if something is hiding bottom half of the image.
I attached images.
Is there anyone that can see what I am doing wrong?
If I understand your question correctly, you want to center an image on the background of your homepage. Is this correct?
You can add the following code to the CSS for your home page:
body {
background: url('https://i.stack.imgur.com/mvJMy.png') no-repeat center;
background-size: cover;
}
Here is a website that I find very helpful with CSS, and some documentation on background...
https://css-tricks.com/almanac/properties/b/background/
#Angelina,
Try adding the full height of the background image.
.classForTheBgImage {
background: url( link to the image );
height: 800px;
}
I am currently struggling with the CSS of my mobile-view pages (handehlds, for example iphone in portrait view). Strangely, there is an approximate margin of 90 pixels to the right of the body/content container. I simply do not get the reason for that - any idea?
See it here:
http://quirktools.com/screenfly/#u=http%3A//bigbertha.golfanatics.de/testsite/&w=320&h=480&a=33&s=1
URL: http://bigbertha.golfanatics.de/testsite/index.php
Thank you in advance for any hints! best regards, Ralph
What you can do, is this.
body {
overflow-x:hidden;
}
This will remove the scroll bars on mobile. (from left to right)
Edit: I took another look at your site, and noticed that you have this on your html element
html {
overflow-y:scroll;
}
Remove that line, and voila :)
You have explicit width to #roksearch_results and you just apply opacity: 0;. You have to display: none; to this div ( or change the width to 100%).
#roksearch_result {
display: none;
}
And you also give scew transform to socialmedia navigation which goes beyond your width. You could overflow: hidden the navigation but this would hide the corners of the scewed socials so I would suggest to overflow-x:hidden to the body.
#body {
overflow-x: hidden;
}
I'm seeing different height and width for an image between WebKit and Gecko/Trident, and am not able to narrow down what is causing the difference, and what should be the workaround.
The page in question is at: http://bloom-site.com/2013/02/15/tesser-well-madeleine-lengle/
The image in question is the big image which occupies the main post.
Could you help, or point me to how I can figure out the CSS properties causing the difference?
Thanks,
Amit
This should do the trick:
img {
width: auto;
height: auto;
max-width: 100%;
}
Works on my side. :)
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }