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.
Related
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
Thanks for the great answers last time, I had been working on that problem for days, and someone solved it in ten minutes. Amazing!! So now I have another question for this talented community!
I'm using Sitefinity for this project; long story short, I don't even know where to access the CSS file, and accessing it would probably break the site (as my boss tells me). So everything has to be done with inline styling.
Here's the setup: there's a bunch of text (in a ul), and an image. The text wraps around the image, which is small enough that the text is squished to the left at first, then continues in its full width underneath.
When the screen gets too small, the text starts wrapping around the image (which has been floated right) in weird ways; one long word can make the text stop and start again after the picture (I've already suggested adding word-break for this, but it's a no-go).
Here's what my boss wants: image floats to the right of the text on larger screens, then floats above and center on smaller screens. Again, no stylesheet, just inline styling.
Some attempted ideas:
Use asides: can't. That needs the stylesheet. (Unless someone who knows this knows a better way!)
Use padding on the image: tried. It messes up the formatting; what works to push everything underneath on mobile squishes everything to the side on desktop. (If someone knows a better way, let me know!)
Use JS: can't. Basically, everything has been styled somewhere deep within the code, so I've just got a tiny HTML text box to work with, no tag to work with at all.
Thank you for all suggestions! This is a talented community!!
You should us a CSS widget, add some classes to your then within the CSS widget write the appropriate media queries, if you need this to affect more than one page put the CSS widget on a template instead of an individual page.
I´ve recently started to program all my layouts in tableless CSS, but still prefering the old tables style. Much faster. Anyway, I´m stuck in this layout that is almoust finished, but I need help to one minor detais, which I can´t manage to fix.
Here is the test address:
http://www.syncsystem.com.br/
As you can see, the design and background are almoust complete. Later I´m gonna put the rest of the stuff in, like links and so on. The problem is at the bottom. The ideia behind this is that the background texture stay fixed, as is is. But there´s a white space at the bottom which I can´t get rid of...can anyone help or give a hint?
Thanks,
I'm not sure if that's what you are talking about, but the footer's background image itself has some space in it below the black part.
And the footer has the same height as it's background image, so the whole image is being shown.
Next time use some web development tool such as Firebug, or use a native one pressing F12 in Firefox or Chrome. It will help you quickly analyze the page element's properties
I am currently working on recreating Apple's iOS 5 Toggle Switch in HTML5 and CSS3. The key is that due to requirements, the composition cannot be made up of any images whatsoever. I have been able to achieve almost everything that I wanted, however there seems to be an issue with cropping the container box so that it only displays half of the toggle at a time.
Here's a screenshot to help explain what I mean:
Notice that the pink border (added only for development purposes) is rounded, but the content which extends past it seems to break out of the border-rounding. Can anyone suggest a suitable method by which I can prevent the content from expanding past the border-radius - effectively cropping the content of that div to fit inside the rounding?
I am currently thinking that this could be achieved using the -webkit-mask-box-image property, and image data URLs (for example somethin like: data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7). Is there a better solution, or can anyone offer help on creating these data URLs?
I hope that makes sense, and any help gratefully received.
Unfortunately I believe this is a design flaw with webkit. The content is never clipped to the border radius. As for base64 encoding, I've found this tool helpful
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.