Jump to content

Search the Community

Showing results for tags 'image'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • The Web Designer Forum Community
    • Web Designer Forum News
    • Web Designer Forum Introductions
    • General Chat
    • Design Competitions
  • Web Design Resource
    • Website Design and Layout
    • Website Reviews and Feedback
    • Other Resources
    • Graphic Design Forum
  • Web Development
    • Frontend
    • Server Side
    • Content Management Systems (CMS)
  • SEO, Website Marketing and Business
    • Social Media
    • Freelancing, Business and Legal Discussion
    • SEO (Search Engine Optimisation) & Search Engines
    • Website Management
  • Software & Hardware
    • Web Browsers
    • Web Design Scripts & Software
    • Web Development Scripts & Software
    • Hardware
  • The Marketplace

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL




Found 38 results

  1. Hi there, its a simple html document, made with neatbeans 8.3, on windows 10 and i only use html + css. There is a content id which has a background like: #content { width: 50%; height: auto; background-color: transparent; float: right; margin-top: 2%; margin-right: 6%; margin-bottom: 5%; padding: 1px; background-image: url('Pic123.png') ; background-repeat: no-repeat; background-size: cover; background-position: top center; After this code was ready, it worked and still works, with each browser. Then - I made a copy of the html doc, - did not change any html or css code, - except the text within the html-doc- content. But Pic123 is not shown/presented with its full strukture. Looks like the browser tooks just a stripe from the middle of that pic and spread it over the whole content-space. (Imagen a pic at a wall, with a huge bold frame around and within just whitepaper with any type of texture. ) I'm the browser, i cut off the frame, also whats next to it and strech it now till it fits the content space. I have no Idea what might be the reason.
  2. We provide a range of cartoon illustration and puzzle services so the main image on the home page is currently a montage of various images representing that. But some important voices are unconvinced and would prefer a single image - either a hero image or a carousel (which I've read no-one bothers to use so had dismissed) what are your thoughts/experience? Here's the page if you want to see the current solution - http://www.donkeyworx.com/index.shtml - feedback welcome. TIA. Paul
  3. jmerlinb

    Weebly custom HTML/CSS help?

    Dear all, Would anyone be able to tell me how to edit the HTML of my Weebly website's banner image (the bike in the rain)? I know it must be somewhere under Design > Edit HTML/CSS, but as I have little HTML knowledge, I am unsure where to look. If it helps, the end game is to make the banner image interactive (so that it changes back and forth between two images upon mouse over or clicking). Take a look: www.lightcycles.xyz
  4. Hi all, Each page on my site uses its own specific header image relevant to it. I did this via WP Display Header plugin, but I don't know how to do this for the mobile version of the site i.e. the same banner appears on every page. Is this possible? If so, how? Any help is appreciated, Niall
  5. jwt231

    Website from Image

    beginner here... I am curious if I can make a photograph of a webpage (how i would like it to look), on photoshop..including links and everything a home page would have?? i would like to be able to insert frames, therefore when a link is opened it is opened in a frame on the home page? please advice, thank you
  6. Bartekx300

    Title of the article over the image

    Hello guys. I want to change title position over the image. I will add screenshots to better understand my problem. I have My articles looks like this and that's the way it should be . How I can do it? It have to be responsive.
  7. embluk

    Selecting Part of an Image?

    As like on YouTube, when the screen resizes the channel art image is resized but it selects part of the image, keeping it centered still. Could anyone point me in the right direction in order to get the same effect? I have only be able to put an image inside a div and then use CSS to crop the div, and set overflow to hidden, but this does not keep the image centered like it does on the channel art on peoples YouTube channels.
  8. Hello Community. I'm trying to make my own Website right now, and i'm struggling with some things concerning positioning of a grid, Writing on an <img>. So here is my project. I couldn't find out how i can also upload the pictures i use, because i'm in a hurry: http://jsfiddle.net/genkidama/yccah10t/ how can i get my navigation bar responsive? By responsive i mean, when i minimize my window, it also minimizes. how can i change the margin of my columns in my grid? all of them have the name col1.... i sadly have no possibility to upload my files, so that you can see the pictures. If someone would be as nice as to help me, i could also send my whole project . Greetings, Raff
  9. Hello, I am building my first website and I'm facing the following problem: I have a frame/border as a transparent image file and a embedded video (Screenshot). I want to either place the video inside the transparent area of the image or to place the image over the video. In other words, I need to overlay either the image over the video or the video over the image. Since I have absolutely no knowledge about HTML coding, I hope that someone can assist me with this problem.
  10. lathiel

    CSS problem

    Hello, I have a little problem with css. I made background image in size 1920 width and everything works good for me but when I wrote this code #content{ background-color:transparent; width:100vw; height:auto; position: absolute; margin-left:auto; margin-right:auto; } #background{ background-image:url(Images/tlo.jpg); width:1920px; height:2034px; ; margin-top: 250px ; top: 50%; left:50%; position:relative; vertical-align: top; z-index:0; display:inline-block; } Content here is a parent div where inside I put background div. Problem is that after I put background div its starts to allow scroll my web verticaly and I want to block it. I tried overflow-x: hidden; but its not working for me because you can scroll web with using mouse roll. All website is 100% width and this div make it wider. Thanks for help
  11. Hi I believe my webpage is written ok to make sure that when the browser window height changes the images size changes, however when adjusting the height only of the browser window the images do not change in width and height in order to be fully visible. Take a look at the jsfiddle. <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style> html, body { position: relative; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: none; color: none; margin: 0; padding: 0; overflow:hidden; } .page { background-color: white; width: 80%; height: 80%; } .page-text { text-align: justify; position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .table1 { width: 90%; height: 90%; font-size: 0.7vw; margin: 0 auto; text-align: justify; } .responsive { position: relative; max-width: 90%; max-height: auto; } .container { text-align: left; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative } video { position: absolute; top: 0px; left: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; } </style> <!-- jquery resize --> <script> causeRepaintsOn = $("body, fix, h1, h2, h3"); $(window).resize(function() { causeRepaintsOn.css("z-index", 1); }); </script> </head> <body> <div class="container"> <video id="video" preload="auto" poster="http://dummyimage.com/600%20x%20400/17c700/000ed1.jpg" autoplay muted loop> </video> <div class="page"> <h1>Test</h1> <table cellpadding="5" class="table1" > <tr> <td colspan="2" valign="middle" style="width:50%; text-align: left;"> <img src="http://dummyimage.com/315%20x%20450/000/fff.jpg" class="responsive"></img> </td> <td colspan="2" valign="middle" style="width:50%; text-align: right;" > <img src="http://dummyimage.com/315%20x%20450/000/fff.jpg" class="responsive"></img> </td> </tr> <tr> <td width="25%" valign="top" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</td> <td width="25%" ><!-- LEAVE CELL BLANK --></td> <td width="25%" ><!-- LEAVE CELL BLANK --></td> <td width="25%" valign="top" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</td> </tr> </table> </div> </div> </body> </html> Any ideas? Thanks
  12. aaronnacka

    Image slider

    Hi, I have a very easy question. What is name the slider? I need to use it, but i don't know where i find it. I want that use for a wordpress. Thanks a lot! Jerremy.
  13. carloswebwdf

    Simple Realtime Javascript Image Gallery

    Hello everybody ! I intend to recieve an image gallery like the photo below. I´m in a hurry and don´t know Javascript, and don´t want to learn in my way ! Instead to develop with programming, that means, create one particular page to every photo...must have with progmming.....that after the user click at the arrow for next or back...update 'instantly' the photo, the numeration of the photo, and the arrow´s links... I am Webdesigner and only know HTML, CSS, Photoshop, Flash, PHP e MySQL. PHP don´t dominate. I started to search at Google about this kind of simple image gallery and it make me fell tired.. so I give up this search and now I will try complete help result at forums........ Please....somebody help me... I garantee that, if someone help e to resolve this...I´ll give money remuneration ! Wait for fast and resolved answer..please Huge Carlos
  14. Hi there I want to insert an image gallery and as well as a discussion forum in two separate HTML files but I'm low on time and I'm hoping one of you guys could help me out. Finances will be provided upon completion of the task. I have attached the HTML files to this post for anyone who is interested. Gallery.html Discussion.html
  15. Hiya, I'm currently making a website using the Padhang theme in wordpress. I want to include a feature so that when the page first loads it shows the image in the background for a second or two before showing the content. Any ideas how to do this? I'm a complete newbie in the web design world. Cheers
  16. iAmMitch92

    Problem with Expandable DIVs

    Hi, I seem to be having a problem incorporating expandable divs within a grid of images set up through an <ul>. Basically what I want is for my 3x3 grid of images (a list of portfolio projects) once clicked to expand below, spanning 100% width of my wrapper div whilst other projects of the same row remain in place and only the rows below dropping to accommodate the depth of my expandable. After doing some research I was able to find code which allows for all of the above EXCEPT when activated all following images are knocked down to the next row as shown in attachments. ALSO when I apply this code to numerous <li> items each becomes clickable but will only expand/contract the first div. If it helps. here is my current code.. <li> <div class="toggler" onclick="toggleText('toToggle');"><a name="work"><img class="project_image" src="img/project.jpg" alt=""></a> <div id="toToggle"> This is the content to be toggled<br>This is the content to be toggled<br>This is the content to be toggled<br><br> </div> </div> </li> div.toggler { background: #e5e5e5; cursor:pointer; } div.toggler div { display:none; } #toToggle { float: left; width: 100%; margin: 0; background: #e5e5e5; } function toggleText(id) { var theText = document.getElementById(id); (theText.style.display=='block') ? theText.style.display='none' : theText.style.display='block' ; } If anyone could help or send me in the right direction that would be great!
  17. gykr

    logo not display.

    Hello forum, Need some help please. I downloaded a free CSS template call "folder" and I want it to use this template for one of my project. I got trouble replacing the logo. The logo is 222px x 56px png file. I located the file, use photoshop to make one with the same size, save it in png, replace the original. And when I check in the browser, the logo disappeared. This is the first time I replace an image with same size and file extention but didn't work. Help please!
  18. Hey im getting a white border around my image when i would like it to strectch right out to the edges. http://gyazo.com/fd32a9d9854b5fb004d042bfdfdbe2b8 Basically that image is in the back, then the content area that will go below will scroll over the top giving a nice scrolling feel my code for the relavent bit: http://gyazo.com/cfed6c732c6daeb02ce0de6667c70a98
  19. Hello all, Having some issues on a friends site where by an error message 'Upload error: You must enter a picture location.' keeps showing whenever an image is uploaded on the 'add an image' page. The unusual thing is, the website and coding files do not get accessed and it was working fine just days before. I am not an expert with coding nor PHP and I am more of a designer but I said I know the forum to ask for help . Here is the link if anyone can have a peak into the coding. The image upload page is only accessible once admin is logged in to create new adverts. http://bit.ly/1frwwVf Perhaps someone has encountered a similar issue before. I didn't create the site but I can get access to the server and files. Cheers all
  20. How to reduce image size as much as possible so that website loads much faster?
  21. Hello community. Firstly, I'm kind of new here, although I've sometimes used the forum to check on some tutorials/information. I never however had the need to create an account, since I use it from time to time. However that day finally arrived 8D Moving on, I'm currently designing a website and due to the design I've done, I have a small problem. Since I'm a very sweet person I've made a small paint (skills) draw to explain my problem, because being on other designing forums (not websites) I've often had problems in understanding the user's problem. Here goes the image: Now the problem is as follows: I've drawn the background image number 1 and the "lines" as you can see, go as a match with the header number 2 Because I have the menu and logo there, I can't make that header a background image, and I don't think it would make sense Now what I need is to make that number 1 image be fixed in that position with the header, and then repeat itself as in number 4. This would be very easy, however.. I want the header, as seen when in a big screen (screen 2) to also repeat it self like shown in number 3. This would be easy if it didnt have the shapes there to match the background image. And it would still be easy if I just made the background image with the header included, and hide the "fake header" behind the real header in the main center of the website. Again, howeeever... I want the image to repeat itself down also like in number 4 again. Therefor I have to make the background image a full blue one, with the same shapes as the header and including a header but in blue, and hide that one behind the real header. And then I need the header to also repeat itself as a full image, not as small 5px images or something. The footer in number 5 would also want to repeat, but because there are no shapes there, it doesn't matter. I also, as obvious, want this to be a dynamic thing, with the center being the center of the website if scalled down, and when scalled to the sides it would remain the center. You get what I mean I bet, but something kind of like WoW's website (http://eu.battle.net/wow/) except their header doesn't need to repeat I thought of some solutions that I'll present bellow, but I'm unsure of how to code some of them and I don't know how practical they would be: Can I, with div's, set the header with invisible background? Meaning there wouldnt be any header, only buttons there "floating in space" and the image would repeat itself only horizontally, and when it needed to go vertically it would place another different image in full blue Maybe do a 1800x1800 image and make it repeat only vertically? I don't think there's anyone using higher than what, 2560x1440 or something. But wouldn't the website be sooo heavy? I was going to add more solutions, but my dog ate my keyboard, sorry Anyway, that's about it, thanks for any possible feedback.
  22. Hi everyone, Wondered if some1 could assist me i have this page: http://www.bluegeeks.co.uk/test your see the background image around the content basically i would like this to Expand if the content goes too far down etc. So wondered the best way to do this. Kind Regards, Aaron
  23. I'm about to create a background image in photoshop to use as a background design for a website but not sure what size/ratio to make my image. Ideally you don't want the image to get squished or stretched depending on different monitors and browsers. Then there's retina and new high-res screens. What would be best to ensure I have long term compatibility with as many different users as possible? Personally I am currently on a 1440x900 screen. Also what resolution should I choose? Thanks
  24. robinmujician

    Vertical alignment for logo

    I'm not liking CSS today. Several hours later and what I imagined would be a really simple thing to do still eludes me. I want to align text vertically against an image for a logo, so even if the text is not as tall as the image, it will have the same amount of space above and below it. Here's my basic code: <html> <head> <style type="text/css"> #logo{ height:100px; width:960px; } #logo h2{ display:inline; font-size:72; color:red; text-shadow:1px 1px 2px black; padding-left:5px; } </style> </head> <body> <div id="logo"> <img src="my image" alt="image for logo"> <h2>Text to align vertically</h2> </div> </body> </html> Can someone please help? Regards, Robin.
  25. AblazeRich

    Img Overlapping Text in IE

    Hello All, Battling IE with my responsive website (as per usual!) This time I'm getting a weird thing happen. I have a block of text which a image sticks into. The text wraps around it on all the pages and all the browsers, except on this page (and only in IE - testing in http://mason-uk.co.uk/service.asp?pid=1#.UWLnL6KsiSo Any ideas why this may be? Thanks so much again for all your help! Rich