I'm trying to limit the repeated body background image (some call it sprite) from overflowing the bottom.
The reason I'm using the before: method, is because it was the only solution I could find to add transparency to background image transparent without causing everything else to have transparency.
I notice whenever I pull content: " " style, the overflow is removed correctly, but the image disappears causing it's necessity. It's the image wanting to finish displaying in its entirety that's causing the extra scrollable space below the body.
I have tried various combinations of background-size, overflow, even background-position (which is kind of not really related to this).
The background tile is rather large 528x290px, and this is a responsive site.
Here is the code im working with
jade
body
div#body-wall
sass
#body-wall:before{ //background image
position: absolute;
z-index: -1;
left: -264px; //set half image dimension to remote initial offset
top: -250px;
background-image: $body-bg-image;
background-repeat: repeat;
// background-size: 528px 290px; //actual image dimensions 528x290
// width:190%; //set wider to accomodate for top and left offset
// height:120%; //set wider to accomodate for top and left offset
opacity: .15;
content: '';
}
#body-wall{ //implemented for background image
position: relative; //important for background image to display
}
The reason I have the top and left offset is to get the image to a nice starting position. Please note, adjusting the top and or left positioning does nothing to fix the issue.
What can I do to tweak the styles to get the image to cutoff, using this before: method.
EDIT
What Im seeing in my development site, there is an additional few hundred pixels of overflowed image causing the bottom of the site to fall below well below the footer div (see fiddle).
Expected result, I expect the image to be clipped off at the bottom of the content, as opposed to causing the content boxes to expand until its finished displaying leaving a few hundred px of overlap.
I was able to recreate what I'm seeing, its in this fiddle here, but i had to actually comment out the position relative in the #body-wall for some reason, where on my development site, if i do this, the bg disappears entirely to a blank white.
#body-wall {
/* position: relative; */
}
Please note, I have an entire bootstrap3, then migrated to bs4 site in the middle of that tempdiv. Also note, migrating bs had no effect on the way its displaying like this.
Any suggestions?
Related
I'm trying to move my site logo to the left, but when I use negative margin the logo disappears behind the column.
I photoshopped the desired outcome:
This is the website URL: https://designthinkingworkshop.nl/
I've tried z-index in combination with negative margin-left and overflow visivle but I can't get the logo on top of the column next to it.
Without making any massive changes, this can be achieved by removing the 15px padding on your container:
.container {
padding-left: 0;
}
If it's important for the logo to be flush with the border, you could use a negative margin on it:
.header-logo.logo-image img {
margin-left: -1px;
}
There are plenty of other ways to achieve the same, including redoing your header section. I'm not a fan of your layout here, it could possibly be a lot cleaner.
Also, I'm sure sure whether you're using any animation or transition effects on your page, but viewing your page caused a large, continual increase in CPU usage by my browser process.
I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!
I'm quite new to web development and jQuery, so please bear with me.
I'm using Nivo Slider on a website that I'm working on. It's a responsive website, and I want the slider to be easily visible on all screen sizes. I've set a breakpoint in my CSS so that when the site gets to its smallest size (around the size of a mobile screen) the slider is set to 200% width, with the overflow hidden, so that the images are larger.
This works fine, however at this size you can only see the center of the slider, while the sides are cropped off by the edge of the screen. For most of the images I'm using this isn't a problem, however one of them is cropped very awkwardly. It's easy to reposition the whole slider, but I want to try and move this ONE image over so that it can be better seen on small screens.
The CSS I've added to the default nivo-slider.css is:
#media screen and (max-width: 31.25em) { /* 500px ÷ 16px */
.slider-wrapper{
overflow: hidden;
}
.nivoSlider {
left: -50%;
width:200%;
}
.nivo-caption {
margin-left: 25%;
width: 50%;
}
}
Thanks very much!
Just using CSS, you could add a one-off type class to that particular image, and throw that into your #media query:
.my-one-off { left:??px; margin-right:??px }
You could search for that image with jQuery as well (if I'm not mistaken, Nivo uses the jQ library).
$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example
Or
$('img[src*="one-off.jpg"]').addClass('my-one-off');
I looked at nivo-slider3.1. In order to select a particular image only and move it left you could use the following in css:
img[src="YourSpecialPic.jpg"]{
left:50px !important;
}
You can also set a custom animation for one particular slide with the following img attribute within the HTML:
data-transition="slideInLeft"
You can sub any attributes to get the desired effect, but I think this will do the trick.
NOTE:
Depending on what effects you are using will determine whether or not that messes up the animation (e.g. The slicing animation becomes screwed up after performing the left move. The slideInLeft animation seems to work fine.).
I don't have a quick or easy solution for fixing all the animation effects for that one particular slide, but I'm sure a conditional statement within the javascript could achieve it (I'm just not smart enough for it).