How do I make the background image continue into the container - html

On the following site: http://bit.ly/1gEehw2
I need to get the background for the header to continue into the body and .container div. I tried wrapping container in another div and padding margin/padding and making the background transparent, it did not work. I also tried to use z-index to solve this, and that also didnt work.
Can someone give me some insight on what I am doing wrong?

I just changed some of you code and worked. first give your header a bigger height:
.header{
height: 500px;
}
clear many many background:#fff css from you items like .jbcbackground and its children
and add this css to your main body element (give a negative margin-top):
.jbcbackground {
margin-top: -250px;
position: relative;
z-index: 100;
}

Related

the content of my webpage keeps overlapping with my background image slideshow, i've tried all i can to fix this

You can preview the site at https://enigterry.github.io/nwtest.html . This is link to my code https://github.com/enigterry/enigterry.github.io/blob/main/nwtest.html
The issue is with z-index. You need to add z-index higher than 0 (that is being set for the hero) but to be safe say 99. Also for the z-index to work you need to set the position to relative. Also another issue is the black background added to the container which spreads across the entire page. Remove that and apply to the .w3-content. You will still need to work on the padding to make it look better.
.w3-content {
max-width: 980px;
background-color: #000;
position: relative;
z-index: 99;
}

Scroll bars never appear when re-sizing web page

so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}

How to hide this image behind it's container?

To have a responsive design, I made this <img> to have max-width:37%;. But when I open the jsFiddle window far enough to make it wide enough, the image extends over it's containers size and won't fit anymore.
This is a screenshot I made:
But I want the overlapping sides not to be shown, like this (photo edited):
If you want to see it in action, use my fiddle.
The image should not be seen further than the boundaries of its containers are. How can I prevent that the image is bigger than its container?
I assume that you want the entire image to stay visible. So, you need to set the max-height property to 100%.
.mbox img {
max-height: 100%;
max-width: 37%;
position: absolute;
right: 0;
z-index: -1;
}
Here is a jsfiddle.
Update: Since you want the image to keep the max-width:37% you need to hide the overflown part.
I added a div that wraps the div.mbox_content and the img. I gave to this div the class mbox_wrapper. You also need to add the z-index:2 property to the <h2>.
.mbox_wrapper {
overflow:hidden;
position:relative;
}
.mbox h2 {
z-index:2;
}
Here is an updated jsfiddle.
Just need to change the z-index property
you need to apply a max-height tag to the css..
Then the image won't be able to exceed the height of the containing div.
max-height: 100%;

why is my css overlapping my content?

You can see my webpage here
http://209.140.27.232/~ashleyo/portfolio.html
I can't seem to figure out whats wrong with my CSS. It appears that an invisible container is overlapping my content so I can't click on the images with the exception of the bottom ones that seem to be outside the container
Remove #content id z-index -1 and
Now add z-index 0 on your #content id
As like this
#content{
z-index:0;
}
Hope this may help you :)
Actually heres neither a need of this "z-index" for CONTENTs DIV and neither "height" for CONTAINERs DIV as theres no need of z-index and height can be grow automatically.
Simply Remove these properties.
#content{
z-index:0;
}
#container{
height: 500px;
}
and if you want you can limit your div`s max hieght with this CSS Property
#container{
max-height: 500px;
}

Text overextending past footer DIV tag

I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.
My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.
In this image here, the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??
I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position properties, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right.
This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!
Link: http://bubble-wrapped.net
#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}
#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}
#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}
It looks like you've set the footer to a set height, which is why the text is overflowing.
If you're find with cut-off text, try adding a CSS property to the footer: overflow:hidden or overflow:scroll.
If you don't want overflow, then try removing the height property from the footer or setting it to height:auto or something similar.
Has to do with position: tag & height: tag
I suspect it has to do with the element within the container and not just the container.
It would help if you would post most of your code so we can see if other things break it.
Your question doesn't really say what your looking to do, which doesn't help us help you.
If its anything like Possible same situation & answer #StackOverFlow
Hope this helps you!