I am trying to make a basic page using wordpress, so i add many raws, and for each raw, i edit and upload a background image.
The problem i have is, why if i increase the font, or make the margin down, the image shrinking. I want the image full sized that row, so whenever i increase the font or add spaces, that will keep or maximize the background image, not shrink it.
This is the page i refer, http://www.zeidny.com/index.php/solutions/
Thanks all for your help,
your code should be
<p class="solu1"><span>"I have a message, I want you to hear"</span>
instead of
<p><span class="solu1">"I have a message, I want you to hear"</span></p>
and set min-height for background image and remove margin-bottom style.
Related
My Woocommerce brand page header banner (Thumbnail) is not displayed in the original size, it is somewhat zoomed in. When I asked about that my theme support he wrote:
"That section has cover background image, so as per the nature it auto resize the image size to adjust and cover full container and also it is parallax, so it is better to have some more height in your image like 1920px X 1000px."
My image size was 1920x600.
When I added more height it does not fix this problem, because it again is somewhat zoomed in and loses quality, and also some part of image.
So - How can I make my Woocommerce brand page header image to be displayed in the real size, without this zooming effect? Without adjusting and covering full container? I should mention that this zooming effect is also seen in my main page header slider.
My image size would be 1920x600 and I wish that it is displayed in the original image size.
Thank you!
To fix this problem I added a CSS code:
.parallax-fix.page-title-shop {
background-size: 100% !important;
}
In my website, i have placed an image after the navigation bar. What i expect is the image re-size itself according to the size of the screen. Actually it does re-size but it leaves a blank space above the image when it re sizes which looks award.
The image fits exactly when the scrren resolution is above 1170px. But when i re-size it to lower resolutions it tends to introduce the blank space.
I have tried many element styles like margin-top: auto, margin-bottom:auto etc. But i couldn't hide that space dynamically. I am so new to the web site development. please help me to fix this issue.
change the style:
.carousel_gallery_item_inner { vertical-align:bottom;}
to:
.carousel_gallery_item_inner { vertical:align:top;}
Good day, I have a DIV of fixed width and height on my HTML page. In normal state it should show image A on the background and in hover state it should show image B. I know how to do it using CSS and two image files A and B. Somewhere I saw those two images (A and B) put into a single image file and then they somehow wrote CSS so that in normal state the DIV showed upper half of the image on the background and in a hover state it showed the bottom half of the image. Could you please advise CSS code to achieve this? The DIV has no position set but it is a child of a DIV with relative position. Thank you in advance.
Vojtech
This is called CSS spriting and is an awesome technique that everyone should use.
See this answer for a good overview. What it comes down to is having a DOM element with a defined height and width and using a background image that is larger than that area. Then you can selectively show only portions of that background image using background-position
I've got a simple question :) Hopefully.
So, I wan't to repeat a website-background-image with CSS. But not pixel by pixel - no - pixelinterval by pixelinterval. For example I want to repeat pixel 0 to 100 of my background image each time it is needed on the y-axis.
For normal, if i had a background image to repeat with the dimensions of 1000*1 px, CSS would display this image each pixel-line in the browser, until it's not needed anymore.
Now, if I put in a 1000*10 px image, CSS would repeat the image as long as there is the need of it PLUS only as long as there is content to display on. That means, if there is (for example) no text to be displayed anymore, the browser would stop displaying the image, even if there were only 1000*5 px of the image displayed.
What I want is to display the full image, even if there is no content displayed on it. That means if the 1000*10 px image is repeated, it's displayed by it's full size. Everytime 1000*10 px - never less.
Is it possible to archieve that somehow?
thanks :)
You can put all of your content in one DIV.Add your img-background style to this DIV. Then with javascript you must get the height of your content , add 5px and round number to 0. Then add the new height to the DIV.
I'm not sure there's a way to do this with pure html/css that would work cross-browser, but you could look to javascript to calculate the height of your container, and work backwards from there, explicitly setting the min-height to a set interval as you'd like...
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 :)