If I have a background image that is, let's say, 20px in width, and I want it to rather be 40px in width (but adjusting in photoshop would not work as I want it).
How can I change the width?
body {
background-color:#5b7c8a;
background-image:url('images/diagnol.png');
background-repeat:repeat-y;
margin:0;
}
It's diagonal lines as you can see from the image,
screenshot http://img62.imageshack.us/img62/4263/testzjr.png
and the spacing is just as I want them. Editing the image may mess up the spacing. So I'm trying to get the background coverage area of the body to be a little bit more? Right now the image is 6px width. I want it to appear as 20px width, as if the image were in repeat-x-y in a 20px div? (so not stretching the image, just gaining more ground with the image)?
I hope this makes sense > <
"adjusting in photoshop would not work as I want it"
CSS is not image editing software. In photoshop you just need to go to Image > Image Size and scale as you wish. Or take your time and learn to use the basics of Photoshop to get the effect you want. You just need to not be scared and experiment with each tool till you get what you want, as you can obviously undo the undesired effects.
The CSS way is possible but it's not meant for these kind of situations and will not be cross browser friendly. It's rarely used on typical sites so fortunately I'm not going to encourage it. Good luck.
I believe there's been misunderstandings with what the OP wants.
Incase i got it right, check out this example:
http://jsfiddle.net/vYxza/
Think of the #text as body and the .this_div as the element you need to create inside it.
Basically you create new element where you repeat the background in all directions but you just restrict the width of that element.
Another way of doing it:
http://jsfiddle.net/vYxza/1/ - This is actually the way i would do it mostlikely.
Note that again.. if you wanted to use it in body... think of .this_div as html and #text as body
Related
I have a menu which looks like this:
When the user clicks on Recruitment, it goes bold (as it should do) but moves the whole menu 1 or 2px to the left. I am using DNNnav.
Boldness of fonts uses extra space. If you make sure that every menu-point has a set width with for example width: 100px;, it should not jump place when you hover over it, as it will be a steady 100px, no matter what's inside.
Good luck!
P.S. If needed you should of course maker it wider than 100px.
It's hard to go through your coded in jsFiddles. But just try to give a fix width in px for your 'span.txt' span.txt{ width:100px;} or maybe min-width span.txt{ min-width:100px;} may help.
after googling a lot for something similar, i could find any REAL answer.
the problem is simple, i have a sprite png image that i use for all of my image assets in the site.
and i have a bg.png file which is 1px by 1px semi transparent file.
which where needed, i put as background for the div.
i would like to get rid of that 1px file.
any idea how this can be done ? repeat 1x1 px portion of the image as repeated background?
EDIT: i do have an idea for a solution:
with c# code i can manipulate the part of the image i need, create a new one and return it as memory stream.
but i just wondered if this is possible by pure css.
Unfortunately, it's not possible. Typically, a separate background sprite is used. I would recommend reading here: http://www.phpied.com/background-repeat-and-css-sprites/
Also, from http://www.telerik.com/help/aspnet-ajax/grid-appearance-css-sprites.html
As a consequence:
a) images that repeat in both directions cannot be included in a sprite, they should remain on their own
b) images that repeat horizontally should occupy the entire width of a CSS sprite (as in the example above)
c) images that repeat vertically should occupy the entire height of a CSS sprite
Would you consider a rather dirty cheat solution? When I'm faced with this question, I steal one pixel from the width of the image and in that 1px-wide column of pixels I put what I want. That is, I copy your bg.png into that column of pixels.
That way, I can get rid of bg.png altogether. Of course, I have to modify every img the same way, but it's worth it (to me) if the img is coming from a sprite.
http://www.pwilson.net/so-wide-cheat.jpg is replaced by http://www.pwilson.net/so-narrow-cheat.jpg
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>
I'd like to be able to add a class to images that adds a border that makes them look like a stack of photos. Anyone know how to do this?
Clarifications: Ideally something like the stack shown here but it doesn't need to be interactive and only needs to work for a single photo. I also don't mind using javascript if needed (jQuery would be preferred though).
The "depth" affect is probably going to be some type of drop shadow. Do you need to rotate the photos as well for the "messy photo pile" effect or are you looking for a "neatly stacked" look?
The "messy photo pile" effect seems to me to break down into three components:
Put a background behind the image for the "polaroid" look (explained in other comments
Put a drop shadow behind the image for the "depth" effect (explained above and in other comments
Rotating images. I've never done this myself but it looks like someone has coded the Jquery plugin you are looking for.
Place your IMG tag inside a nested set of DIV elements (the number of divs will determine the number of photos in the stack). Then use CSS to set the border and padding so that the DIV elements get progressively larger than the photograph. Generally you will add more padding to the bottom and right.
CSS3 it's supported by everyone yet, but you might want to look into border-image.
Put a div around the image and then have 2 styles defined.
<div class="img-shadow"><img ...></div>
.img-shadow {style.css (line 456)
background-color:#505050;
float:left;
margin:5px 0 0 0;
}
.img-shadow img {style.css (line 461)
background-color:#FFFFFF;
border:3px solid #000000;
display:block;
margin:-8px 8px 8px -8px;
padding:10px;
position:relative;
}
in the .img-shadow class, define a graphic for your background that's large enough for your images, and looks like a stack of photos. The above makes it look like the photo is casting a shadow.
Below is my recommendation which has a clear and simple CSS which results in a perfect photo stack.
http://dabblet.com/gist/2023431