There is a vertical bar on my homepage. It is actually an image that looks something like this:
The white boxes are the place-holders for the product images that will be added dynamically. I want to know how to stretch the blue vertical bar as new product images are added. This must be done programmatically.
Use the image as background and repeat it vertically.
Something like this
<style>
.pageBG { background: url(your_image_source) repeat-y; }
</style>
<div class='pageBG'>
<!--your content goes here -->
</div>
From your image I think you can make a small image of dimension 5*5 or something and make it repeat vertically and horizontally. For that you don't have to set the background position, because repeat is the initail value for background-position.
Why to use image at all? Why not simply set the background color for the div:
<style>
.pageBG { background: #35f; }
</style>
You do not need a white hole in the background to display an image.
Related
I'm wondering how I could echo an image depending on a css style?
To be more clear: My navigation is transparent, if I scroll down the navigation sticks to the top of the screen but gets a white background.
My logo can be used in gray and white. When transparent its hard to read in gray, so I use the white version.
When the navigation becomes white, the white logo isn't visible so I want it to change to the gray logo.
Is there a way to change an image with an if / else?
Something like if navigation is white echo graylogo, else echo whitelogo
Thanks a lot!
if I was you, i'd put the 2 images in my code, then, you'd simply have to do show the logo depending on the class. Example:
<div class="nav">
<img src=".." class="white-img">
<img src=".." class="black-img">
</div>
Then the css:
.nav.white .white-img{
display: none;
}
.nav.black .black-img{
display: none;
}
Then, using PHP when you create your page, you could set the right class to your nav element, or using javascript if it's event driven. (user click, user scroll or etc)
I have this project:
And i want the content scrolls inside the grey box. Not go under the box or get out of the box.
How can i do this?
You need CSS to limit the height of your grey box, and say the rest of the content (incase it's higher than the hight you gave) is scrollable:
#grey_box {
height:300px;
overflow-y:scroll;
}
In this code I assumed your grey box was a div with id="grey_box" and height 200px. Change those values if it's not correct. The important is to give a height to the div, and overflow:scroll;
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
}
</style>
</head>
<body>
<div>The property allows to Create Chess Boxes.</div>
how to repeat the above div rounded boxes until reach max width specified or according to table width or resolution & go down to next line and until reach max-height of the screen or as specified (time-table time) so that there is no need to scroll both width wise & height wise ? help needed
You can't - PHP as a server side component has no notion of browser dimensions. You need to handle something like this client-side using JavaScript.
To get your boxes to fill the width of the browser, use float: left in your css. To dynamically add boxes until they fill the page, copy the div using element.cloneNode(true), and continue until the bottom point of the div is below the bottom point of the container.
For example, something like this: jsfiddle.net/rUUuW/1/
It's a little easier with jQuery: jsfiddle.net/rUUuW/2/
Wordpress uses a function to center completely the image on a thumbnail when you are editing a post so it look like this when i´m editing the post:
i´m trying to show the image that way on a wordpress page but I don´t know how to create a function like the one that uses wordpress to do that:
$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );
So this is how it looks in my page:
it just shows from the top, so it cuts the image, no center or resize
this is my markup:
echo '<div class="aimagediv" >'; //
echo '<img src="'.$s['project_image'].'" alt="" width="270" />';
echo '</div>';
i´m limiting the width just to show something, i know it´s wrong to do it that way, that´s why i´m looking for a function to rezise and center the image over the div.
Can someone help me with this one?
I think you're better to put this image as a background image of the div and then using css to change background-size to cover and then background-position to center...
HTML
echo '<div class="image" style="background-image:url(\''.$s['project_image'].'\');">';
echo '</div>';
?>
CSS
.image{
width: 270px;
height: 270px;
background-size:cover;
background-position: center;
}
Here's a jsfiddle showing it in action:
http://jsfiddle.net/Jhu2Y/
will this div have any other content besides the image? you could use CSS to define a height/width for the div and set the image as a background image with a background size of cover... like this:
** EDIT -- Adding PHP tags before and after since the OP was using echo **
<?php
// do all the php code here that you want before the image div
?>
<style type="text/css">
div.aimagediv {
height:270px;
width:270px;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
div.aimagediv:hover {
cursor:pointer;
}
</style>
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');"></div>
<?php
// do the rest of your php stuff here
?>
Then if you want to make the div clickable you could use an onclick like this: (replace the div line above with this one)
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');" onclick="window.location='page_id=42&slide=<?=$i?>';"></div>
It's container probably has a limited height. So When you set the only witdh, it will stretch the image to fit that width, maintaining the aspect ratio.
If you set only the height, it's the other way around.
If you set both width and height it will stretch the image to fit those bounds (and thus maybe screw up the aspect ratio.
So in your case, set the height, or set both (but make sure you got the ratio right)
if you want the image to center relative to it's container, use CSS to set the left and right margin to auto
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.