I would like to ask a small help because I can not handle with overlay a div with background. In my website there are welcome section which is 100% width and 100% height, it has a background image which is covered a small texture pattern and rgba color. It works correct but I have a problem with other section which can not be covered by overlay.
The problem is with "CTA section" because it use padding (top and bottom). Unfortunately, the whole background of this section is not covered and generally I do not know how I can fix it very simple. I would not use const height property because I want to create something which will match to content of section (all content in this section should be centered vertical and horizontal and also works in smaller devices, so padding is fine).
Well, I am wondering if you could help me with it because I really do not know how to code it or even rebuild it.
Here you can see a demo: http://codepen.io/testerius/pen/viryc
That's all. Hope you answer soon.
If I understand you correctly you need to change the CSS for the CTA section to what I updated your codepen to here >> DEMO
Let me know if that is what you need.
Try use same padding for .section-pattern-overlay and remove padding from .cta
Related
Hello i have been working on this website for a while and i have been working on making it resizable when you adjust the window size (or resolution of screen) and when i finally got it to work now the links on the graphics are not clickable
http://javiermedinaloera.com/
Here is my website, all of the circles are coded to be links but only two of them work
Thank you very much, i would really appreciate your help
I know what your problem is: you have 100% width for all items in each line, but they have the same z-index, of course one will "cover" the others. The solution is change the width of them, give each of them a width let's say 250px, then adjust your "left" attribute. Probably you could see your site works in IE, because IE doesn't render your css the ORDINARY way.
Your div tags are not formatted with specific widths. Each div tag is taking up close to the whole width of the page. You need to give them specific widths. In the style tag at the top, add this CSS.
<style type="text/css">#arrieros{ width: 270px; }</style>
Just set the width to 270px for each div that you have and it should work fine.
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
Alright, I am designing a website using XHTML 1.0 Strict and CSS 1,2,3. And, I have a container for the page, that contains every div within the container, I have min-height specified on the container to ensure expanding of the page.
But, I have another container within the page container that contains a content div and sidebar div and all 3 of the containers inside the content container are set to height: inherit; and all have a min-height.
On the container which includes both the content and sidebar divs, I have a background gradient image which is positioned at the top and center, but am also calling out a background color which I want to continue as a sort-of fade-out effect, which would leave the container open for page expansion.
But, the problem is, the color is not repeating all the way down within the container.
You may view the design below, it is linked with a pretty well organized External Style Sheet. As well as the HTML page being well organized.
http://www.noxinnovations.com/portfolio/kolja/
Thank you very much StackOverflow,
I hope to hear from someone very soon,
Aaron Brewer
I'm not 100% sure if i understood your problem.
But adding:
this
float: left;
to this:
#content-container
Should do the trick.
That link gave me a 404 Page not found.
Perhaps you mean that you want to stretch the background-image using css? In that case I can tell you that such a thing is impossible. You cannot stretch css background images.
Usually when you want a gradient background you make a sufficiently long gradient and fill the rest of the background with the ending color of the gradient.
CSS 3 supports defining gradients as colors. W3C working draft of gradients.
I'm having some problems traying to place 3 images into a background, I mean, I have one image on top, actually a is 2000x550 pixels, then I need to leave 200px (vertical) and place another image that cover also the all the center and them one image into the footer.
Do you think that is better to make a full image a place it? full it's about 30KB. Or there is any way to place it using css?
Kind Regards
You should be able to achieve this with css z-index. See the following links for more information:
W3C Schools explanation of z-indexes:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Indepth explanation of z-index's from Smashing Magazine:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To answer the question of how to place the header image, the best way would be to define a div with a specified height (a 550px tall header seems awfully large to me, but hey, its your site) and width (probably set to 100%), and use the background-image css property to place the image there. This will prevent any side-scrolling.
A sample of the what you have going on to go with the sample images would be nice. From your description though it sounds like you have not implemented the z-index properly. My guess is that you need to declare the position of the divs you are adding a z-index to. Even if it is position:relative you still have to declare it or the z-index doesn't work.
-- Edit for real answer --
After looking at your images this is not actually that hard to implement. Here is how I would do it -
Set the background of BODY to white and the green/pink/gray background:
body{background:URL(images/green-pink-gray_bg.png) #fff no-repeat;}
Set the background of the DIV to the gray image -
div#gray{background:URL(images/gray_bg.png) #fff no-repeat;}
There is no need to set the z-index of anything since the div with the gray background is already "on top" of the BODY of the page. Using PNG images with transparent backgrounds will allow the white background to show through anywhere it is not covered by one of the background images.
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)