I'm quite new to CSS and for sure I'm missing something basic here but I really can't figure it out. This is the code:
In HTML I have this:
<div class="tab-left"></div>
In CSS:
.tab-left {
background-image: url(images/left.png);
background-repeat: repeat-y;
position: absolute;
width: 96px;
height: 1049px;
margin-left: -40px;
z-index: 99999;
}
However, the repeat-y property does not work. This is the site in question: http://ziontouch.com/wordpress/
What am I doing wrong?
Your repeat is working fine. The problem is that the height isn't tall enough to reach the bottom edge of the page.
The background is repeating.
The problem is that the .tab-left has an explicit height set, which isn't as tall as you are expecting.
It works but the height of your DIV element is not big enough to fill up the whole space...
It is repeating, just up to 1049px as specified by your height attribute.
You should use a bigger height.
.tab-left {
height: 1622px;
}
That reaches exactly the beginning of the border bottom.
I see that you're using jQuery in your page so what you can do is use jQuery to find the height of your div#page and use that value to set the heights of your tab-left and tab-right classes.
Like this:
$('div.tab-left').css('height',$('div#page').height());
$('div.tab-right').css('height',$('div#page').height());
Then as content is added to your page, it will adjust as necessary.
Related
I am quite new to the css and bootstrap i have searched and tried the w3c solution and also the SO but did not work well. Actually i want to have an image as a background on my homepage. on which there would be my content like 3 small buttons/icon in the middle of the page.
I have tried this
<div id="homepage">
</div>
css:
#homepage{
background: url(../images/homepage.jpg);
background-size: 100% 100%;
background-repeat: no-repeat
}
but it is not working.
2nd Solution:
Second thing which i tried was to include a img tag then add my content and drag to the middle by absolute position which i think is not a good way because responsiveness did not remain there.
Can any one help me in this regard.
Assuming you double checked the image path,I think the problem is the size of the div.
try giving your div a fixed width and height in order to test if at least this way the image is showing.
<div id="homepage" style="width:500px;height:300px">
</div>
Then check out how to use the bootstrap grid system in order to make your div as big as you wish.
You can try this:
#homepage{
background: url(https://paulmason.name/media/demos/full-screen-background-image/background.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
http://jsfiddle.net/y558vo9a/
if you want the background image to be in your index page, there is no need in adding '../' and no need in adding background-size, -repeat when you can actually set your code so;
background: url(images/homepage.jpg) no-repeat 50% 50%;
but if it works for you, you can use it so. And i also noticed, you forgot to close your background-repeat with ';'
To set body-height to 100% I use the following code:
html {height: 100%;}
body{
min-height: 100%;
position: relative;
}
I thought this workaround works always, no matter what the content does, but when I use content, that is absolute positioned, the body seems to loose the 100%-height property.
You can see the example here:
Go to https://www.appfelsine.com/was-kostet-eine-App
Reduce the browser width as far as u can.
scroll down.
there is a white area at the bottom.
Position:fixed; would help for the white area, but then it is impossible to reach the button at the bottom.
position: fixed; and overflow-y:scroll; will result in a double scroll bar - doesn't look very nice.
Have you got an idea how to pull the body down until the bottom?
position: fixed; overflow-y:auto; will prevent scrollbar showing when it is not getting overflow. It prevents double scrollbar issue
Maybe you can just put "background-color: #3ab252" on your ".question-inner" ?
On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
I'm using wp-supersized to set a full width background that dynamically resizes. http://wordpress.org/extend/plugins/wp-supersized/
Here is what I have implemented: http://www.preview.sharonblance.com/
I have a fixed height header with height of 154px, and I want the top of the image to fill the screen from the bottom of the header, so that the top of the image isn't getting cut off.
I think that the plugin uses the browser full height though and I want to try to change this.
Can anyone suggest how I could do this?
Hopefully it's never too late to answer one of these. My response is inspired by this post, that unfortunately didn't work for me, but let to a solution: https://github.com/buildinternet/supersized/issues/72#issuecomment-6427232
First, you need to add this javascript (I placed it right after the $.supersized call):
$('#supersized li').height($(window).height() - 154);
Then, add some CSS:
#supersized li { top: 154px !important; }
#supersized li img {
width: auto !important;
max-height: 100% !important;
top: 0 !important;
}
Finally, you might want to disable the supersized overlay while debugging:
#supersized_overlay { display: none !important; }
Good luck!
#supersized li for this class add top: 154px; I mean height of the header. hope it will work.
I guess this is already solved but here it is anyway!
find your supersized.css file and edit as follows:
#supersized img {
padding-top:154px;
}
in the header menu i am using an image with repeat-x property. it works perfectly in full screen however in low resolution i.e in 1024X768 and 800X600 screen it leaves some margin. it leaves the margin when a horizontal scroll takes place. how do i make sure even if horizontal scroll exist the repeat-x property should cover the area of the scroll. is there any css property for this?
the css for this i am using is.
#header {
height: 111px;
background: url('../img/header-bg.jpg') repeat-x;
width: 100%;
}
let me know if you want more code ill host it in jsfiddle. thank you.
i have hosted my site in http://iarmar.com/test/bn just in case you want to test.
Set min-width: 1040px; to your #header
As expalined in my comment (and by Jeaffrey), set your #header with a min-width or use 100%.
See this www.viralment.com oh its says 30 at least
try using these:
background-image: url("gradient_bg.png");
background-repeat: repeat-x;