I want to create something like below -
The card is indicated by the blue color inside which we have two texts. My approach was to add two divs inside the card div but the problem I am facing with that is, I want to put an image in the card and adding it in background doesn't fill the whole card and leaves some margin, which I tried to fix but didn't work.And have to write a lot of css to fix the margins padding etc for both image and text.
Is there a better way to achieve this ?
In place of blue color I will have an image.
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
I have a question. I want to make a panel/box like the Panel in Bootstrap 3 with a header background.
I made a little sketch in paint, that you can see how I mean it.
I tried adding a class to my box with a background as the image, but then my text below is ON the picture. I even tried making a new class IN the box div but it seems that is not the best option to do, also bootstrap also didnt made it like that and if I use padding the image also applied on the padding. I only want the content below to apply to my padding.
THE SKETCH, THE RED PART IS THE IMAGE it has 100% width
my goal is to add text inside the box below which is an image and depending on how much text I enter, I would like to have the middle part of the image extend to accommodate for the increase of text inside. I do understand that one method is to "chop" the top part, a small section of the middle part, and the bottom part, and have the middle part repeat numerous times. I was wondering if someone could suggest how one goes about doing this, or, if there is a better option to take instead. Thank you in advance.
I've hosted the pictures through Flickr
You could make the image the background of the div then set "background-size: cover". The image would then grow to fill the div as the div grows.
This is how my current header looks like. I want to edit it that the part in the picture below has the same color as the div next to it / the border. How can I do this?
Code on jsbin: http://jsbin.com/ezeyib/3/
You can acheive this by oversizing the border thickness and then setting the parents overflow to hidden.
See this example.
http://jsbin.com/ezeyib/5/edit
I mean you need to create a png file using Photoshop or Illustrator to retrieve the expected result.
If you can have a plain background instead of a gradient background, you can create two big blocks (one green and one blue), and on top of those, create a shape with rounded corners which matches the actual look.
I'm trying to do this:
into html so when I type some text the line gets longer or shorter.
On the end of each line there is a small icon of height of 32px so I would image each line would be line-height:32px.
Shall I use <li> or div's and sort the icon next to the line next to the text with float:left? And how would the line increase it self? I would imagine the line would have a background-color and a height of 1px?
I'm not new to CSS, I'm just trying to think of the simplest way of doing this. Note that each line is a button which expands.
Thanks alot
Edit:
It will actually look something like this:
Each div is a toggle button and I would like the grey line to be in the middle of the entire div if that makes sense.
Thanks alot again
Simplest way I can think of is to use border-bottom on the text container, then push the text out with negative bottom.
Quite simple really, here you go: http://jsfiddle.net/pixelfreak/DCZSa/
If your background is solid, I would probably implement this like so:
http://jsfiddle.net/JLwwP/
First, use an all-white background (or whatever color). Then, on your list items, tile your horizontal line. Then, float the image (with a white background) to the right. Finally, wrap your left-hand text in a span and make it's background the same solid.
It's not perfect (it requires some fiddling with node heights to make everything work), but you can see the effect.