Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'd like to know how you would create the effect of the background-image showing under the text.
Here's an example: chevalblanc.com. I imagine two <sections>, the first one has that cut out text background image, the second section has a photo or something in the background.
I noticed they used a png where they "cut out" the letters and used it as background, but how do you create the scrolling effect?
Update: I found out how to do it, actually it's pretty easy. You have to give two background images to your <section>or <div> and you set the image you want to have in the very background "fixed". For Example: .yoursection { width: xx %; height: xx %;
background-image: url(images/backgroundimage.jpg) center center no-repeat fixed, url(images/foregroundimage.jpg) center center no-repeat;
}
Worked fine for me.
An alternative to the CSS 3D transforms would be to use parallax scrolling (an example of which below)
http://prinzhorn.github.io/skrollr/
Basically, with Skrollr you can transform. scale, skew and rotate the heck out of any element, all done in layers and transitioning is smooth. So essentially I would say just find a tutorial about the usage of Skrollr (or just experiment), create your elements, which in this instance would be a background with transparent text, and then another background image beneath the transparent text background element.
This is purely crafted with combination of CSS3 and Jquery. Yes I can see they are using png transparent mask (mask05.png). To answer your question how the scrolling is achieved please read through http://24ways.org/2010/intro-to-css-3d-transforms/
the transparent text you are watching it is not text its a solid image
here is a link for it
http://www.chevalblanc.com/randheli/medias/images/intro/1400/maskintro-en.png
and for scrolling there is a plugin called snapscroll
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
Improve this question
Right now it is not covering the whole width of the screen
I have searched and tried the solutions for all those with a similar questions.
It either pulled the image right or left and made it bigger.
If anyone has any ideas that would be great.
I'm a student and beginner at coding.
Here you need to use background-size: cover; in your css to get the image to cover the full width of your area. It is the most flexible way of doing it, but it will cut your image at the bottom and on the sides depending on how small the screen is and how tall the container element is. You can of course adjust this with css background-position.
Here you have some other ideas for how to solve your problem: https://css-tricks.com/perfect-full-page-background-image/
background-size:cover; will fix this
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I need to create two divs like in image. both can have background images. Any one can help?
Two divs http://development.230i.com/tsips_new/v2/images/Untitled.png
There are several ways to do this.
Old School
One way would be to crop the overlaid image so that it has a triangle cut off and replaced by transparency. This would work in any browser that supported .pngs, however, the downside would be that for each image you'd need to create a new crop. A photo-shop batch process or server side image processing job on upload would cover this best, depending on whether you have full control over the images (photoshop) or are dealing with user uploaded images (server side processing)
Masking
By using css masks you could create a mask for the overlaying div that forced transparency through the overlaying div to the div beneath it. You'd want an image where the triangle cut-out is black and the rest transparent. The black area is the area that is retained, while the rest of the div is transparent, revealing the div underneath.
This answer here gives a working example, though the shape is different.
The syntax is pretty simple, you just define a -mask-image with a url that works like a background image. Prefixes are required and support is still a bit limited.
Clip Path
Clip path allows you to clip the overlaying div to let a div underneath show through. You can use this tool to set it up. I've nicked the following css from their output that defines a triangle on the bottom:
-webkit-clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
In this example, the overlaying div is clipped to the triangle shape allowing the white background to show through. Again, support is limited.
More about clip-path and masking.
With all examples
It's possible with all examples to swap the overlaying div to be the triangle or the square with a corner cut off. It makes no difference to the result.
Also, in all cases you'd need to use position to overlay the two divs on top of each other exactly. Like this:
.container {
position: relative;
}
.div1,
.div2 {
position: absolute;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm having a query with my site currently which I require some assistance with.
When a user will load up my site, the image of the 'cutlery pouch' will be resized according to how big the user's browser/monitor is. However when this happens the image some users see will be the background of the image, instead of the main feature, the pouch.
I was wondering if there was a way around this so the image resizes when using 100% width and a fixed height.
Here is a quick link to my problem so you guys may be able to help me.
A link to my website
Thank you in advance for any helpful responses.
Instead of
background-position: 0 22%;
try
background-position: center 22%;
And perhaps edit the image to have the pouch more centered.
You could probably just adjust your image so that the pouch is centered in the image itself, then use background-position: center;
Edit: I notice your image is a square, where as the container you're putting it in is a rectangle. This is also not helping towards it being positioned correctly. Try adjusting your image to the aspect ratio of the container as well.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
A friend ask me to take a look on one issue on his site. In the portfolio section on the website, there is a border around the div and a rollover evect when the images are hovered. However, there is one weird issue, the height of the box containing the image and all data is larger by 5px in height.
The image is square, and all of the parent elements have width and height elements set to 100%, there are no paddings or margins that could have caused this, so I can't seem to find a reason for this.
Could anyone point to a location where is this happening and how to fix it?
A sample code describing this problem can be seen here.
Thanks!
Your code is heavily awful, but putting display: block on the images will fix it.
The reason is that images are inline elements, so you will get some phantom padding to the bottom to account for things like the bottom of g, p, q, etc.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
i want to have the gradient as background image like this
how can i achieve that
EDIT:
I want to stretch down to bottom , but if i repeat it then i see the top bar gain , i want that dark portion remain at bottom and central part expands
http://gradients.glrzad.com/
OR
http://www.w3schools.com/css/css_background.asp
If you really-really need to achieve this with background image, here is an example.
Of course it doesn't work everywhere — you need JS polyfill to make browser that don't support background-size property happy. I would recommend jQuery Backstretch for this.
But, what you really want to do (I hope so, at least) is to make it as flexible as possible and thus, you should take a look at this or this CSS gradients tutorial instead of the image. And, of course, you can use one of the CSS gradients generator like:
http://gradients.glrzad.com/
http://www.colorzilla.com/gradient-editor/
http://css3please.com/. This one is useful for CSS3 in general.
I would do it using a div or other element at the top of the page to give you the 'bar' and use a gradient background image, attached to the body in your css, aligned to the bottom and repeated.
body{
background:url(yoururl.png) repeat-x bottom;
}
For the 'bar', use the following CSS for the same style effect...
.topbar{
position:relative;
top:0px;
left:0px;
height:30px; /* or whatever height you want */
}
Apply your colours and borders to the bar however you see fit.