I am using the pro-theme "Frame" for Wordpress and have not been able to find support elsewhere for an issue (developer of theme won't support plugin compatibility issues--understandably). I am trying to re-position header/nav so that it does not overflow onto background images, rather, the background images are positioned below the header/nav wrapper/container. I've been trying to fix this issue for a few days now and cannot find a solution.
For example: below the link will show the BG image of a woman and I would like her head to not be cropped/covered. I also need whatever changes to be responsive and work with the additional features on the site (i.e. - homepage has a slideshow, etc.).
LINK
Thank you for any help--it is much appreciated!
Best regards,
The HTML of the page is a mess. I suggest to modify the background image of the woman itself (with whatever editor you want), just add a top margin to the image, let's say 80px white colour.
This is the easiest solution. If you provide me more details were this background is generated/paced I may be able to give you the CSS solution.
Related
I'm looking for a wordpress theme or plugin that will let me mimic the background image effect found on this website. I'm referring specifically to the way the fixed background image changes based on the scroll position. I.e. if you're at the top of the page, the background image is the man at the lockers. If you're at the bottom, the image is of the band.
I know it's possible to do this with javascript, but I'm wondering if there's a theme that incorporates this effect.
You'll find a lot of themes out there that have the parallax background scrolling effect: https://themeforest.net/tags/parallax?category=wordpress&referrer=search&utf8=%E2%9C%93&view=list (these are the results for WP themes with the "parallax" tag)
There are a few plugins as well, such as this one: https://wordpress.org/plugins/adamrob-parallax-scroll/
I know little to nothing about HTML or CSS (but I am trying to learn little by little).
I am currently working on my professional portfolio and I'd like to break the website up a bit better than I have it now now (that is, with horizontal lines after each section). I've designed the website so that it is a one-page style site. However, it would be nice to change the content background for different sections of my resume, the about me (which I know needs more work, I hate talking about myself lol), and the contact me parts of the site. I'm thinking something along these lines, but much simpler.
I'm currently running Wordpress 3.8.1 and using the Highwind theme. I achieved the scrolling action with the Page 2 Scroll ID plugin. What you should be aware of is that all the content on the site is on a single page and the menu buttons merely point to different locations on the page by the way of divs. See this tutorial for a better explanation.
I'm not sure you're going to be able to get this happening with the Highwind Theme, or at least without some heavy customization of it.
The way the types of sites you're talking about work is that each section of the page has a 100% wide div with a 1255px wide div (the inside div could be anything really as long as it's not 100%) the inner div is centered inside the 100% wide outer div.
Here's a very quick codepen example...
http://codepen.io/catchlightWeb/pen/tpKrG/
For your example, instead of the SectionOuterOne and SectionOuterTwo classes having different colors, they'd have different background images.
Hope that helps.
My website is built, (graphically designed) to be compact. Because my background will not look good on repeat, fixed, or with a white/black gradient towards the bottom. The thing is, I need to have a fixed content area, because of the graphical nature of my site. A box, which has to remain the same size, at all times. So, my question is, can I use wordpress, in such a way, that I will get a sort of iframe, within my content area, without the content area dragging on for how long the content is ? Let me show you an example of what I want : http://s15.postimage.org/obk0ivffv/2352366d.png
Can this be done, in wordpress ? Through CSS or something ? Thank you.
Just wrap your content in a div, and set a max-height and overflow-y:scroll on that container with css.
Edit: fiddle example
http://jsfiddle.net/Kncy6/
I've looked everywhere and can't find an answer for this, I think possibly because nobody has had the same problem, or possibly because it's a very specific problem.
The problem I'm having is, that linked images on the site I'm working on, have a small border underneath when hovered over, this is in all browsers (apart from IE 7, which the site was designed originally in). This is due to setting a:hover as having a background. Despite setting no borders, margins and padding to images, it's still not happy for some reason.
I only have 2 ways to solve it, set a class with no background on certain a tags, or display the linked image as a block. Unfortunately both these solutions aren't suitable, because the site has hundreds of pages, and possibly thousands of linked images, using a class means finding them all! Using display block will break some of the displays of images, such as the when they're centered nicely in a p tag.
If you want an example of it not working for me, the homepage of the site in question is http://www.tameside.gov.uk, look at the social media icons in the top right, they're all getting the background hover treatment.
If anyone could help I'd be really grateful.
Thanks,
The image icons are PNG and have a transparent background. That is why you can see the background.
You can change the icons to have white background (same them as JPEG) and you will no longer see the background.
A faster fix would be to add a new CSS rule that apply only to the a tags inside the social media div:
.banner_container .social a {
background: none !important;
}
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.