I currently have a hexagonal background, but it's all one image. This generally works fine, but I may get in trouble if someone has a huge resolution. I wanted to see if it was possible to scale hexagons according to the size of your display.
Below is an example of what kind of background i'm using.
I know you're able to repeat an image with the CSS3 repeat, but not sure how I can accomplish it with something like this. Anyone have any ideas?
See If this link http://jtauber.github.io/articles/css-hexagon.html could help you do the same. Hope it helps.
Related
Hi I can't exactly find a name for it but what I am trying to accomplish is to instert an image and blend it with background using CSS gradient(for example from full white to transparent) to on frames. I used spray in photoshop to better explain. Can someone send me some tutorials or help me find a name for the action I am trying to do so I can find some tutorials? Thank you.
I think best way is make this effect with Photoshop and save as .png with transparent background instead white color of frame. Then you will be able to see background color in your website
There are definitely a few approaches you can take!
What you're looking for is:
"image masking"
There's a great answer here that outlines a few of the approaches.
Note: the question I've linked to has link-rot, but the answer is still good.
I was wondering if there is an easy way to recreate the attached image using CSS3.
I've included this image as a page background but one of the senior devs told me there is an easy way to create this image background using CSS3.
I thought the background images can be done using CSS3 for repeatable patterns. But this image doesn't have any patterns that I could see.
Is that possible for this image?
I think this is interesting as experiment, but its not pragmatic.
You can convert an image to css here. PNGs work best.
Warning though, you will get tons of lines of HTML + CSS to create this image. It will come out pixel perfect though. I will also warn you that I tried uploading it to Jsfiddle, Jsbin and Codepen - all of them would just hang. Pen loaded and I couldn't save it since it's larger than 1MB.
This is what my text editor looks like with your image converted to CSS though.
This is just for reference. Yes, you can convert to CSS, but it doesn't mean that you should. I suppose it might be useful for things like email? But not for large images.
Cheers!
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I have a div, and I would like to create a background for it in the in the following manner. The top half must be a solid colour, and the bottom half a semi transparent colour?
How do I go about creating this? making it work in all the major browsers? without splitting up the div into two separate ones.
I am being told this cannot be done but there must be some kind of dirty, hackerish way to do it.
Can someone please point me in the correct direction? or suggest some alternatives? all help is greatly appreciated. Thanks.
Use a transparent PNG as the background image. Make it very large but thin so you can tile it.
I am being told this cannot be done but there must be some kind of dirty, hackerish way to do it.
Three words: IE6.
If you can get it to work there, you can get it to work anywhere!
I would suggest writing an on-the-fly image creator that creates just the right transparent image for the page and renders it in such a way that IE6 supports the transparency of the image. You could certainly use almost any language that supports image manipulation or command-line callout to do that, it just won't be fast. Then you could use that generated image to achieve your goals.
That would be a dirty hackerish way to do it.
I also would shower twice with bleach after writing such an abomination. But that's just me.
I got my colleague's web page together with and the css files and many images. I need to apply part of it to my jsp page. I have to admit that I didn't have any experience in handling css. Currently I am using GIMP2 to edit those 1-pixel-width background images. It's really the pain in the neck. I have to guess the proper image size, crop it a bit, then view it in the jsp... Do you have a better way to edit those 1-pixel-width images? Thanks in advance.
You might want to look into using Firebug add on for Firefox. There you can tweak the height of the graphics while looking at the page (yes, you need some knowledge about the DOM, CSS and Firebug to fully get this, but it's worth learning). Once you're happy with it, you open up your image editor and crop the image to that height.