Blurry large image on another image

Here is what I would do.

Since you have a hard dimension requirement of 700 x 300, I would begin by working to a size twice that, so 1400 x 600

Wordpress is going to render all the sizes it needs for the various things it needs, so might as well start higher.

Copy and paste your book cover into that (don't worry that it's larger than your canvas size), and immediately make it a smart object by right-clicking on the layer and Convert to Smart Object. Scale that new object down to to the size you want. Now, click the layer, right-click and select Rasterize.

After you've done all the other work you need to do, save it as one file at the current 1400 x 600 size, then if you really need to do a hard 700 x 300, change the Image Size and resample down to 50% selecting Preserve Details 2.0. This will give you what I feel would be your best outcome with so few pixels. It will still be wildly pixelated on your cover's small type, but it will "appear" sharper.

Whenever you're preparing something for web, the very first thing you need to find out is the pixel dimensions. Not ppi, that's irrelevant, but how many pixels wide by how many pixels high.

Then prepare your file to those exact dimensions (and forget about ppi).

If it's for a responsive site, so that the size of the image is scaled with the browser width on screen, decide on the largest practical size. Prepare the image for that, and accept that it will look a little softer than it would with a fixed size.

The one thing you always want to avoid, is enlarging images. That always looks bad (as you've seen).

 Website Banner on site

 Original image duplicating to banner image

  Original image size

. Banner in PS with other layers

Could you please post a screenshot taken at View > 100% with the pertinent Panels (Toolbar, Layers, Options Bar, …) visible? 

And one of the faulty browser display. 

can you show us examples/screen shots?